Vue项目中ESLint配置（VScode）

1.VScode的配置格式化代码

1.1下载eslint插件

1.2配置setting.json

打开左上角文件-首选项-设置,在设置中搜索eslint，点击并翻页到最下面，点击setting.json进行配置：

  // 值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
  "editor.formatOnSave": false,
  // 每次保存的时候将代码按eslint格式进行修复:
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": ["js", "vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.lintTask.enable": true,
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.3保存时按照eslint规则保存

鼠标右键->使用…格式化文档->配置默认格式程序->选择eslint
这样之后 alt+Shift+f之后就是按照eslint规则保存

2.安装ESlint

npm i eslint -D
1

3.安装ESlint相关依赖

npm i eslint-plugin-vue vue-eslint-parser -D
npm i babel-eslint -D
npm i eslint-config-standard-D
1
2
3

4.配置.eslintrc.js

ESLint配置的内容
环境：配置脚本在哪个环境下运行；
全局变量：脚本运行期间会访问额外的全局变量；
规则：配置代码的语法规则及规则的等级。
具体内容：

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  //指定eslint继承的模板
  extends: ["plugin:vue/essential", "@vue/standard"],
  //此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    browser: true
  },
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
  plugins: ["vue"],
  //指定javaScript语言类型和风格
  parserOptions: {
    parser: "babel-eslint"
  },
  //规则https://www.wenjiangs.com/docs/eslint，vue规则：https://eslint.vuejs.org/rules/
  // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  //"error" -> 2 开启错误规则
  rules: {
    // 使用 === 替代 == allow-null允许null和undefined== [2, "allow-null"]
    eqeqeq: 0,
    // 双峰驼命名格式
    camelcase: 0,
    //要求或者禁止Yoda条件
    yoda: 2,
    // 行尾不使用分号
    semi: 0,
    //强制一致地使用反引号、双引号或单引号。
    quotes: 2,
    //强制函数中的变量在一起声明或分开声明
    "one-var": 2,
    // 禁用 console
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    // 强制 generator 函数中 * 号周围使用一致的空格
    "generator-star-spacing": "off",
    // 禁用 debugger
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": 2,
    // 函数参数不能重复
    "no-dupe-args": 2,
    // 禁止重复的函数声明
    "no-func-assign": 2,
    // 禁止重复的 case 标签
    "no-duplicate-case": 2,
    // 禁用未声明的变量
    "no-undef": 1,
    //禁止出现多个空格
    "no-multi-spaces": 2,
    // 不允许标签与变量同名
    "no-label-var": 2,
    //禁止tab
    "no-tabs": 1,
    // 禁止 var 声明 与外层作用域的变量同名
    "no-shadow": 0,
    // 禁止 if 语句中有 return 之后有 else
    "no-else-return": 0,
    // 禁止出现空函数.如果一个函数包含了一条注释，它将不会被认为有问题。
    "no-empty-function": 1,
    // 禁止出现未使用过的变量
    "no-unused-vars": 1,
    //禁止在返回语句中赋值
    "no-return-assign": 0,
    // 禁用行尾空格
    "no-trailing-spaces": 2,
    // 禁止修改 const 声明的变量
    "no-const-assign": 2,
    // 禁止类成员中出现重复的名称
    "no-dupe-class-members": 2,
    //禁止使用alert confirm promp
    "no-alert": process.env.NODE_ENV === "production" ? "error" : "off",
    //禁止多余的冒号
    "no-extra-semi": 2,
    //禁止在条件中使用常量表达式
    "no-constant-condition": 2,
    //空行最多不能超过2行
    "no-multiple-empty-lines": [1, { max: 2 }],
    //禁止无用的表达式
    "no-unused-expressions": 1,
    //禁用不必要的嵌套块
    "no-lone-blocks": 2,
    //不允许使用逗号操作符
    "no-sequences": 2,
    //禁止不规则的空白
    "no-irregular-whitespace": 2,
    //函数括号前的空格
    "space-before-function-paren": 0,
    //处理回调错误
    "handle-callback-err": 1,
    //首选承诺拒绝错误
    "prefer-promise-reject-errors": 0,
    //要求或禁止在注释前有空白 (space 或 tab)
    "spaced-comment": 1,
    //强制关键字周围空格的一致性
    "keyword-spacing": 1,
    //强制在花括号中使用一致的空格
    "object-curly-spacing": 1,
    // 控制逗号前后的空格
    "comma-spacing": [
      2,
      {
        before: false,
        after: true
      }
    ],
    // 要求或禁止 var 声明语句后有一行空行
    "newline-after-var": 0,
    //强制使用一致的缩进
    indent: 0,
    // html 内 缩进
    "vue/html-indent": 0,
    // 插值两端必须留一个空格
    "vue/mustache-interpolation-spacing": 0,
    //强制每行的最大属性数
    "vue/max-attributes-per-line": 0,
    //vue/属性顺序
    "vue/attributes-order": 0,
    // 强制要求在对象字面量的属性中键和值之间使用一致的间距 "var obj = { "foo": 42 };"
    "key-spacing": 0,
    // 禁止末尾逗号
    "comma-dangle": 0,
    // 强制在块之前使用一致的空格 "function a() {}"
    "space-before-blocks": 0,
    // 要求操作符周围有空格 "a ? b : c"
    "space-infix-ops": 2,
    // "() => {};" // 强制箭头函数前后使用一致的空格
    "arrow-spacing": 2,
    //插值中强制统一间距
    //强制组件中的属性顺序
    "vue/order-in-components": 0,
    //不允许字段名称重复
    "vue/no-dupe-keys": 2,
    //多次引用同个包
    "import/no-duplicates": 2,
    //执行有效v-for指令
    "vue/valid-v-for": 2,
    //V-bind:key使用v-for指令要求
    "vue/require-v-for-key": 2,
    //不允许解析错误<template>
    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
    //强制执行自闭式
    "vue/html-self-closing": "off",
    //不允许计算属性中的副作用
    "vue/no-side-effects-in-computed-properties": 0,
    //禁止 v-for 指令或范围属性的未使用变量定义
    "vue/no-unused-vars": 1,
    //执行有效v-model指令
    "vue/valid-v-model": 2,
    //强制执行有效的模板根
    "vue/valid-template-root": 2
  }
};
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

5.package.json配置

lint:检验eslint规则
lint-fix:修复一般的eslint检验出的缺陷比如双引号变为单引号

  "dev": "vue-cli-service serve --open",
  "build": "vue-cli-service build",
  "dev-eslint": "npm run lint vue-cli-service serve --open",
  "build-eslint": "npm run lint vue-cli-service build",
  "lint": "eslint --ext .js --ext .vue src",
  "lint-fix": "eslint --fix --ext .js,.vue src"
1
2
3
4
5
6

6.Config.js配置

在vue.config.js中把lintOnSave改为true

7.扩展

关闭ESLint检查

多行关闭所有规则：
/* eslint-disable /
console.log(‘hello world’)
/ eslint-enable */

单行关闭所有规则：
console.log(‘hello world’) // eslint-disable-line
// eslint-disable-next-line
console.log(‘hello world’)

单行关闭指定规则：
console.log(‘hello world’) // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
console.log(‘hello world’)