使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式

先安装插件.Vetur+ Prettier + ESlint

1、ESlint设置

文件.eslintrc.js中的配置

 1 module.exports = {
 2   root: true,
 3   env: {
 4     node: true
 5   },
 6   'extends': [
 7     'plugin:vue/essential',
 8     'eslint:recommended'
 9   ],
10   parserOptions: {
11     parser: 'babel-eslint'
12   },
13   rules: {
14     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
16     //强制使用单引号
17     quotes: ['error', 'single'],
18     //强制不使用分号结尾
19     semi: ['error', 'never']
20   }
21 }

2、Prettier设置

文件prettier.config.js或者prettierrc.js

module.exports = {

    // tab缩进大小,默认为2
    tabWidth: 2,
    useTabs: false,
    // 使用分号, 默认true
    semi: false,
    // 使用单引号, 
    singleQuote: true,
    // 行尾逗号,
    TrailingCooma: 'none',
    // 空格
    bracketSpacing: true,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    arrowParens: 'always',
}

3、Vetur设置，

在文件--首选项-设置（ctr+,）打开，可以手动去设置选项，

也可以直接点击搜索框最后面的位置 “打开设置（json）”打开，使用json格式来编辑设置选项,

自动生成的就是 settings.json

{
  //.vue文件template格式化支持，并使用js-beautify-html插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //js-beautify-html格式化配置，属性换行不强制、每行120字符
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
  "vetur.format.defaultFormatter.js": "prettier",
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact"],
  //保存自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    //保存时eslint自动修复错误
    "source.fixAll.eslint": true
  }
}

4、上述设置Vetur+ Prettier + ESlint设置以后全部保存，即可。