ESLint

1、介绍

ESLint是最流行的JavaScript Linter。

Linter 是检查代码风格/错误的小工具。其他类似的 Linter 工具还有：TSLint、stylelint。

它包含三个功能：

  • （1）check syntax

  • （2）find problems

前两个可以统称为 Code-quality rules，例如 no-unused-vars 规则。

  • （3）enforce code style

最后一个可以称为 Formatting rules ，例如 keyword-spacing 规则。

下面介绍的 Prettier 就只有这一个 Formatting rules 功能。

2、安装

1
2
3
4
npm install -g eslint
全局安装。
npm i -D eslint
局部安装。

3、使用

  • (1) 生成配置文件

    1
    2
    3
    4
    下面的命令，可以在项目的根目录创建.eslintrc.js配置文件。
    eslint --init

    按照交互提示，依次选择进行：

  • (2) 校验文件

    1
    2
    3
    4
    5
    eslint yourfile.js
    命令行会返回出现 problems 的数量和相应行数。

    eslint --fix yourfile.js
     直接修改文件

  • (3) 修改配置文件

package.json

1
2
3
4
"eslint": "^7.30.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0"

eslint-config-standard - 规则

更多配置见eslint官网

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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
{
  "parserOptions": {
    "ecmaVersion": 2021,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "env": {
    "es6": true,
    "node": true
  },
  "plugins": [
    "import",
    "node",
    "promise"
  ],
  "globals": {
    "document": "readonly",
    "navigator": "readonly",
    "window": "readonly"
  },

  "rules": {
    //要求使用 let 或 const 而不是 var
    "no-var": "error",
    //强制 getter 和 setter 在对象中成对出现
    "accessor-pairs": ["error", { "setWithoutGet": true, "enforceForClassMembers": true }],
    //强制数组方括号中使用一致的空格
    "array-bracket-spacing": ["error", "never"],
    //强制数组方法的回调函数中有 return 语句
    "array-callback-return": ["error", {
      "allowImplicit": false,
      "checkForEach": false
    }],
    //强制箭头函数的箭头前后使用一致的空格
    "arrow-spacing": ["error", { "before": true, "after": true }],
    //禁止或强制在代码块中开括号前和闭括号后有空格
    "block-spacing": ["error", "always"],
    //强制在代码块中使用一致的大括号风格
    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
    //强制使用骆驼拼写法命名约定
    "camelcase": ["error", {
      "allow": ["^UNSAFE_"],
      "properties": "never",
      "ignoreGlobals": true
    }],
    //要求或禁止末尾逗号
    "comma-dangle": ["error", {
      "arrays": "never",
      "objects": "never",
      "imports": "never",
      "exports": "never",
      "functions": "never"
    }],
    //强制在逗号前后使用一致的空格
    "comma-spacing": ["error", { "before": false, "after": true }],
    //强制使用一致的逗号风格
    "comma-style": ["error", "last"],
    //强制在计算的属性的方括号中使用一致的空格
    "computed-property-spacing": ["error", "never", { "enforceForClassMembers": true }],
    //要求在构造函数中有 super() 的调用
    "constructor-super": "error",
    //强制所有控制语句使用一致的括号风格
    "curly": ["error", "multi-line"],
    //要求 switch 语句中有 default 分支
    "default-case": "error",
    //强制在点号之前和之后一致的换行
    "dot-location": ["error", "property"],
    //强制尽可能地使用点号
    "dot-notation": ["error", { "allowKeywords": true }],
    //要求或禁止文件末尾存在空行
    "eol-last": "error",
    //要求使用 === 和 !==
    "eqeqeq": ["error", "always", { "null": "ignore" }],
    //要求或禁止在函数标识符和其调用之间有空格
    "func-call-spacing": ["error", "never"],
    //强制 generator 函数中 * 号周围使用一致的空格
    "generator-star-spacing": ["error", { "before": true, "after": true }],
    //强制使用一致的缩进
    "indent": ["error", 4, {
      "SwitchCase": 1,
      "VariableDeclarator": 1,
      "outerIIFEBody": 1,
      "MemberExpression": 1,
      "FunctionDeclaration": { "parameters": 1, "body": 1 },
      "FunctionExpression": { "parameters": 1, "body": 1 },
      "CallExpression": { "arguments": 1 },
      "ArrayExpression": 1,
      "ObjectExpression": 1,
      "ImportDeclaration": 1,
      "flatTernaryExpressions": false,
      "ignoreComments": false,
      "ignoredNodes": ["TemplateLiteral *", "JSXElement", "JSXElement > *", "JSXAttribute", "JSXIdentifier", "JSXNamespacedName", "JSXMemberExpression", "JSXSpreadAttribute", "JSXExpressionContainer", "JSXOpeningElement", "JSXClosingElement", "JSXFragment", "JSXOpeningFragment", "JSXClosingFragment", "JSXText", "JSXEmptyExpression", "JSXSpreadChild"],
      "offsetTernaryExpressions": true
    }],
    //强制在对象字面量的属性中键和值之间使用一致的间距
    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
    //强制在关键字前后使用一致的空格
    "keyword-spacing": ["error", { "before": true, "after": true }],
    //要求或禁止类成员之间出现空行
    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
    //要求或禁止在三元操作数中间换行
    "multiline-ternary": ["error", "always-multiline"],
    //要求构造函数首字母大写
    "new-cap": ["error", { "newIsCap": true, "capIsNew": false, "properties": true }],
    //强制或禁止调用无参构造函数时有圆括号
    "new-parens": "error",
    //禁用 Array 构造函数
    "no-array-constructor": "error",
    //禁止使用异步函数作为 Promise executor
    "no-async-promise-executor": "error",
    //禁用 arguments.caller 或 arguments.callee
    "no-caller": "error",
    //不允许在 case 子句中使用词法声明
    "no-case-declarations": "error",
    //禁止修改类声明的变量
    "no-class-assign": "error",
    //禁止与 -0 进行比较
    "no-compare-neg-zero": "error",
    //禁止条件表达式中出现赋值操作符
    "no-cond-assign": "error",
    //禁止修改 const 声明的变量
    "no-const-assign": "error",
    //禁止在条件中使用常量表达式
    "no-constant-condition": ["error", { "checkLoops": false }],
    //禁止在正则表达式中使用控制字符
    "no-control-regex": "error",
    //禁用 debugger
    "no-debugger": "error",
    //禁止删除变量
    "no-delete-var": "error",
    //禁止 function 定义中出现重名参数
    "no-dupe-args": "error",
    //禁止类成员中出现重复的名称
    "no-dupe-class-members": "error",
    //禁止对象字面量中出现重复的 key
    "no-dupe-keys": "error",
    //禁止出现重复的 case 标签
    "no-duplicate-case": "error",
    //禁止不必要的字符串字面量或模板字面量的连接
    "no-useless-concat": "error",
    //禁止出现空语句块
    "no-empty": ["error", { "allowEmptyCatch": true }],
    //禁止在正则表达式中使用空字符集
    "no-empty-character-class": "error",
    //禁止使用空解构模式
    "no-empty-pattern": "error",
    //禁用 eval()
    "no-eval": "error",
    //禁止对 catch 子句的参数重新赋值
    "no-ex-assign": "error",
    //禁止扩展原生类型
    "no-extend-native": "error",
    //禁止不必要的 .bind() 调用
    "no-extra-bind": "error",
    //禁止不必要的布尔转换
    "no-extra-boolean-cast": "error",
    //禁止不必要的括号
    "no-extra-parens": ["error", "functions"],
    //禁止 case 语句落空
    "no-fallthrough": "error",
    //禁止数字字面量中使用前导和末尾小数点
    "no-floating-decimal": "error",
    //禁止对 function 声明重新赋值
    "no-func-assign": "error",
    //禁止对原生对象或只读的全局对象进行赋值
    "no-global-assign": "error",
    //禁止使用类似 eval() 的方法
    "no-implied-eval": "error",
    //禁止连续赋值
    "no-multi-assign": "error",
    //禁止 RegExp 构造函数中存在无效的正则表达式字符串
    "no-invalid-regexp": "error",
    //禁止不规则的空白
    "no-irregular-whitespace": "error",
    //禁用 __iterator__ 属性
    "no-iterator": "error",
    //禁用标签语句
    "no-labels": ["error", { "allowLoop": false, "allowSwitch": false }],
    //禁用不必要的嵌套块
    "no-lone-blocks": "error",
    //不允许在字符类语法中出现由多个代码点组成的字符
    "no-misleading-character-class": "error",
    //禁止直接调用 Object.prototypes 的内置属性
    "no-prototype-builtins": "error",
    //禁止不必要的 catch 子句
    "no-useless-catch": "error",
    //禁止混合使用不同的操作符
    "no-mixed-operators": ["error", {
      "groups": [
        ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
        ["&&", "||"],
        ["in", "instanceof"]
      ],
      "allowSamePrecedence": true
    }],
    //禁止空格和 tab 的混合缩进
    "no-mixed-spaces-and-tabs": "error",
    //禁止使用多个空格
    "no-multi-spaces": "error",
    //禁止使用多行字符串
    "no-multi-str": "error",
    //禁止出现多行空行
    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
    //禁止使用 new 以避免产生副作用
    "no-new": "error",
    //禁止对 Function 对象使用 new 操作符
    "no-new-func": "error",
    //禁用 Object 的构造函数
    "no-new-object": "error",
    //禁止 Symbolnew 操作符和 new 一起使用
    "no-new-symbol": "error",
    //禁止对 String，Number 和 Boolean 使用 new 操作符
    "no-new-wrappers": "error",
    //禁止把全局对象作为函数调用
    "no-obj-calls": "error",
    //禁用八进制字面量
    "no-octal": "error",
    //禁止在字符串中使用八进制转义序列
    "no-octal-escape": "error",
    //禁用 __proto__ 属性
    "no-proto": "error",
    //禁止多次声明同一变量
    "no-redeclare": ["error", { "builtinGlobals": false }],
    //禁止正则表达式字面量中出现多个空格
    "no-regex-spaces": "error",
    //禁止在 return 语句中使用赋值语句
    "no-return-assign": ["error", "except-parens"],
    //禁止自我赋值
    "no-self-assign": ["error", { "props": true }],
    //禁止自身比较
    "no-self-compare": "error",
    //禁用逗号操作符
    "no-sequences": "error",
    //禁止将标识符定义为受限的名字
    "no-shadow-restricted-names": "error",
    //禁用稀疏数组
    "no-sparse-arrays": "error",
    //禁用 tab
    "no-tabs": "error",
    //禁止在常规字符串中出现模板字面量占位符语法
    "no-template-curly-in-string": "error",
    //禁止在构造函数中，在调用 super() 之前使用 this 或 super
    "no-this-before-super": "error",
    //禁止抛出异常字面量
    "no-throw-literal": "error",
    //禁用行尾空格
    "no-trailing-spaces": "error",
    //禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    "no-undef": "error",
    //禁止将变量初始化为 undefined
    "no-undef-init": "error",
    //禁止出现令人困惑的多行表达式
    "no-unexpected-multiline": "error",
    //禁用一成不变的循环条件
    "no-unmodified-loop-condition": "error",
    //禁止可以在有更简单的可替代的表达式时使用三元操作符
    "no-unneeded-ternary": ["error", { "defaultAssignment": false }],
    //禁止在 return、throw、continue 和 break 语句之后出现不可达代码
    "no-unreachable": "error",
    //禁止在 finally 语句块中出现控制流语句
    "no-unsafe-finally": "error",
    //禁止对关系运算符的左操作数使用否定操作符
    "no-unsafe-negation": "error",
    //禁止出现未使用过的表达式
    "no-unused-expressions": ["error", {
      "allowShortCircuit": true,
      "allowTernary": true,
      "allowTaggedTemplates": true
    }],
    //禁止出现未使用过的变量
    "no-unused-vars": ["error", {
      "args": "none",
      "caughtErrors": "none",
      "ignoreRestSiblings": true,
      "vars": "all"
    }],
    //禁止在变量定义之前使用它们
    "no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
    //禁止不必要的 .call() 和 .apply()
    "no-useless-call": "error",
    //禁止在对象中使用不必要的计算属性
    "no-useless-computed-key": "error",
    //禁用不必要的构造函数
    "no-useless-constructor": "error",
    //禁用不必要的转义字符
    "no-useless-escape": "error",
    //禁止在 import 和 export 和解构赋值时将引用重命名为相同的名字
    "no-useless-rename": "error",
    //禁止多余的 return 语句
    "no-useless-return": "error",
    //禁用 void 操作符
    "no-void": "error",
    //禁止属性前有空白
    "no-whitespace-before-property": "error",
    //禁用 with 语句
    "no-with": "error",
    //强制大括号内换行符的一致性
    "object-curly-newline": ["error", { "multiline": true, "consistent": true }],
    //强制在大括号中使用一致的空格
    "object-curly-spacing": ["error", "always"],
    //强制将对象的属性放在不同的行上
    "object-property-newline": ["error", { "allowMultiplePropertiesPerLine": true }],
    //强制函数中的变量要么一起声明要么分开声明
    "one-var": ["error", { "initialized": "never" }],
    //强制操作符使用一致的换行符
    "operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before", "|>": "before" } }],
    //要求或禁止块内填充
    "padded-blocks": ["error", { "blocks": "never", "switches": "never", "classes": "never" }],
    //要求使用 const 声明那些声明后不再被修改的变量
    "prefer-const": ["error", {"destructuring": "all"}],
    //要求使用 Error 对象作为 Promise 拒绝的原因
    "prefer-promise-reject-errors": "error",
    //要求对象字面量属性名称用引号括起来
    "quote-props": ["error", "as-needed"],
    //强制使用一致的反勾号、双引号或单引号
    "quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": false }],
    //强制剩余和扩展运算符及其表达式之间有空格
    "rest-spread-spacing": ["error", "never"],
    //要求或禁止使用分号代替 ASI
    "semi": ["error", "never"],
    //强制分号之前和之后使用一致的空格
    "semi-spacing": ["error", { "before": false, "after": true }],
    //强制在块之前使用一致的空格
    "space-before-blocks": ["error", "always"],
    //强制在 function的左括号之前使用一致的空格
    "space-before-function-paren": ["error", "always"],
    //强制在圆括号内使用一致的空格
    "space-in-parens": ["error", "never"],
    //要求操作符周围有空格
    "space-infix-ops": "error",
    //强制在一元操作符前后使用一致的空格
    "space-unary-ops": ["error", { "words": true, "nonwords": false }],
    //强制在注释中 // 或 /* 使用一致的空格
    "spaced-comment": ["error", "always", {
      "line": { "markers": ["*package", "!", "/", ",", "="] },
      "block": { "balanced": true, "markers": ["*package", "!", ",", ":", "::", "flow-include"], "exceptions": ["*"] }
    }],
    //要求 symbol 描述
    "symbol-description": "error",
    //要求或禁止模板字符串中的嵌入表达式周围空格的使用
    "template-curly-spacing": ["error", "never"],
    //要求或禁止在模板标记和它们的字面量之间有空格
    "template-tag-spacing": ["error", "never"],
    //要求或禁止 Unicode 字节顺序标记 (BOM)
    "unicode-bom": ["error", "never"],
    //要求使用 isNaN() 检查 NaN
    "use-isnan": ["error", {
      "enforceForSwitchCase": true,
      "enforceForIndexOf": true
    }],
    //强制 typeof 表达式与有效的字符串进行比较
    "valid-typeof": ["error", { "requireStringLiterals": true }],
    //要求 IIFE 使用括号括起来
    "wrap-iife": ["error", "any", { "functionPrototypeMethods": true }],
    //强制在 yield* 表达式中 * 周围使用空格
    "yield-star-spacing": ["error", "both"],
    //要求或禁止 “Yoda” 条件
    "yoda": ["error", "never"],

    "import/export": "error",
    "import/first": "error",
    "import/no-absolute-path": ["error", { "esmodule": true, "commonjs": true, "amd": false }],
    "import/no-duplicates": "error",
    "import/no-named-default": "error",
    "import/no-webpack-loader-syntax": "error",

    "node/handle-callback-err": ["error", "^(err|error)$" ],
    "node/no-callback-literal": "error",
    "node/no-deprecated-api": "error",
    "node/no-exports-assign": "error",
    "node/no-new-require": "error",
    "node/no-path-concat": "error",
    "node/process-exit-as-throw": "error",

    "promise/param-names": "error"
  }
}
  • 4、ESLint规则的三种级别
    1
    2
    3
    "off"或者0，不启用这个规则
    "warn"或者1，出现问题会有警告
    "error"或者2，出现问题会报错
  • 5、（.eslintignore）

以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略掉不需要检测的文件或者目录

  • 方法一: 新建.eslintignore文件
  • 方法二: 通过package.json文件设置

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "my_project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "eslintConfig": { // 也可配置eslint
    "env": {
      "es6": true,
      "node": true
    }
  },
  "eslintIgnore": ["test.js"]
}
  • 6、结合pre-commit使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    eslint可以结合pre-commit插件使用，目的是在package.json的scripts之前对一些指定的命令提前运行, 相当于一个勾子

    //npm install --save-dev pre-commit

    //package.json 文件
    "scripts": {
      "dev": "node app",
      "lint": "eslint .",
      "fix": "eslint --fix ."
    },
    "pre-commit": [
      "fix",
      "lint"
    ],
    //执行git commit -m 'test' 提交代码时 会先执行pre-commit中的代码
  • 7、添加检查脚本
    1
    2
    3
    4
    5
    6
    {
      "script": {
        // 或者检查当下所有文件: ./node_modules/.bin/eslint ./
        "eslint": "./node_modules/.bin/eslint ./xxx1 ./xxx2 ./xxx3"
      }
    }

单行忽略eslint检测:// eslint-disable-next-line
多行忽略eslint检测:/* eslint-disable */

eslint规则介绍中文官网:http://eslint.cn/docs/rules/

eslint用户文档:http://eslint.cn/docs/user-guide/configuringconfiguration-file-formats

4、跟 vscode 集成

（1）vscode 安装 ESLint 扩展

（2）确保有 .eslintrc.js

（3）生成 .eslintrc.js 时候（eslint —init）的第一步选择，即"How would you like to use ESlint"，不要选择"enforce code style"，因为我们要交给Prettier去负责格式化代码，否则会有冲突！

但如果我们选择了"enforce code style"，那么会多出一步"Which style guide do you want to follow? (Use arrow keys)"让你选，此时可以选择三种代码风格：即 Airbnb、Standard、Google。

5、 WebStorm 配置

  1. 安装插件 ESLint
  2. 开启 ESLint
    1
    2
    打开：File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint
    勾选：Manual ESLint configuration
  3. 配置
    1
    Configuration File选择根目录的eslintrc文件
  4. 添加快捷键
    1
    2
    3
    打开：File | Settings | Keymap
    找到：Plug-ins | JavaScript and TypeScript | Fix ESLint Problems
    添加：ALT + L

6、结合eslint-config-airbnb使用

项目改造

  • devDependencies
1
2
3
"eslint": "^7.30.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.4"
  • Scripts执行脚本添加
1
"eslint": "./node_modules/.bin/eslint ./",
  • 添加.eslintrc.json文件到项目根目录下,并添加如下内容
1
2
3
4
5
6
7
8
9
10
11
{
  "extends": "airbnb-base",
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
      // z
    "no-useless-computed-key": "off"
  }
}

二、Prettier

1、介绍

Prettier于2017年由James Long发布，其灵感来自refmt工具，该工具与Facebook的Reason项目一起使用，该项目利用OCaml的语法与JavaScript协调工作。
Prettier 只是一个Formatting rules ，负责 enforce code style！

2、为什么要把 ESLint 的 Formatting rules 部分用 Prettier 取代？

  • (1) 代码规范比 ESLint 的 Airbnb、Standard 更好更先进。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
// Original implementation from "A prettier printer"
hello().then(() => {
  something()
}).catch(console.error)


// Prettier uses the more common way of formatting:
hello()
  .then(() => {
    something()
  })
  .catch(console.error)
  • (2) 比 ESLint 提供更少的代码风格规则配置项，终极目的是结束关于代码风格的争论。

代码格式化的原理是将代码解析为抽象语法树（AST）来处理。

其实 ESLint 也是基于 AST 的。
  • (3) 比 ESLint 支持更多的语言

3、安装

1
2
3
npm install -g prettier

建议全局安装。

4、使用

1
2
3
4
5
6
prettier yourfile.js
 返回格式化后的文件内容


prettier --write yourfile.js
 直接修改文件