vue-cli3项目配置自动eslint代码格式化校验_cli-plugin-eslint

vue-cli3项目配置自动eslint代码格式化校验
为了使得代码更加规范以及更易读，需要规范前端团队成员的eslint和vscode setting，现在记录下我们需要做的具体方法。

安装依赖
在cmd中打上把相应的依赖加到devDependencies下，再npm install对应依赖。
在package.json文件加上相应依赖：

"eslint-plugin-html": "^6.0.3",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"eslint": "5.0.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "4.7.1",
1
2
3
4
5
6
7
8

eslint配置方法
eslint的规则有三个选项：

"off"或者0，不启用这个规则
"warn"或者1，出现问题会有警告
"error"或者2，出现问题会报错
1
2
3

在根目录创建.eslintrc.js，代码如下：

module.exports = {
   
  // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有   "root": true，它就会停止在父级目录中寻找。
  root: true,
  parserOptions: {
   
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint',
    // 代码是 ECMAScript 模块
    sourceType: 'module'
  },
  env: {
   
     // 预定义的全局变量，这里是浏览器环境
    browser: true,
    node: true,
    es6: true,
  },
  // 扩展风格
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  // 规则的细节请到ESLint官方网站查看http://eslint.org/docs/rules/
  rules: {
   
    "vue/max-attributes-per-line": [2, {
   
      "singleline": 10,
      "multiline": {
   
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/name-property-casing": ["error", "PascalCase"],
    // 定义对象的set存取器属性时，强制定义get
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
   
      'before': true,
      'after': true
    }],
    // 禁止或强制在单行代码块中使用空格
    'block-spacing': [2, 'always'],
    // 强制使用一致的缩进 第二个参数为 "tab" 时，会使用tab
    'brace-style': [2, '1tbs', {
   
      'allowSingleLine': true
    }],
    // 双峰驼命名格式
    'camelcase': [0, {
   
      'properties': 'always'
    }],
    //  数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号
    'comma-dangle': [2, 'never'],
    // 控制逗号前后的空格
    'comma-spacing': [2, {
   
      'before': false,
      'after': true
    }],
    // 控制逗号在行尾出现还是在行首出现 (默认行尾)
    'comma-style': [2, 'last'],
    // 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
    'constructor-super'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63