ESLint 是一个应用广泛的 JavaScript 代码检查工具。本文主要介绍由 AlloyTeam 总结的 ESLint 配置，以及应用 ESLint 配置时的一些经验和工具。
配置原则
我们依据以下三条原则，研读了 ESLint 所有的配置项，定制出了心目中「完美」的 ESLint 配置。
- 能够帮助发现代码错误的规则，全部开启
- 配置不应该依赖于某个具体项目，而应尽可能的合理
- 帮助保持团队的代码风格统一，而不是限制开发体验
配置解读
我们对每一条配置，都有详尽的注释，这样不仅方便了我们自己查阅某项配置的意义和如此配置的原因，也使大家更容易配置出自己心目中的规则：
- 每一条配置都有注释说明此配置的用途
- 对于理解困难的配置，都在注释中有举例
- 对于有争议的配置，都在注释中说明了为什么要这么配置的原因
- 对于关闭掉的配置，都在注释中有对应的原因说明，以及
@off的标识 - 对于能够 autofix 的配置，都在注释中有标注
@autofix
详细的配置内容在这里：
下面列出一个代码片段供参考：
|
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 |
module.exports = { parser: 'babel-eslint', parserOptions: { ecmaVersion: 2017, sourceType: 'module', ecmaFeatures: { experimentalObjectRestSpread: true, jsx: true } }, env: { browser: true, node: true, commonjs: true, es6: true }, // 以当前目录为根目录，不再向上查找 .eslintrc.js root: true, rules: { // // // 可能的错误 // 这些规则与 JavaScript 代码中可能的语法错误或逻辑错误有关 // // 禁止 for 循环出现方向错误的循环，比如 for (i = 0; i < 10; i--) 'for-direction': 'error', // getter 必须有返回值，并且禁止返回空，比如 return; 'getter-return': [ 'error', { allowImplicit: false } ], // 禁止将 await 写在循环里，因为这样就无法同时发送多个异步请求了 // @off 要求太严格了，有时需要在循环中写 await 'no-await-in-loop': 'off', // 禁止与负零进行比较 'no-compare-neg-zero': 'error', // 禁止在 if, for, while 里使用赋值语句，除非这个赋值语句被括号包起来了 'no-cond-assign': [ 'error', 'except-parens' ], // 禁止使用 console // @off console 的使用很常见 'no-console': 'off', // 禁止将常量作为 if, for, while 里的测试条件，比如 if (true), for (;;)，除非循环内部有 break 语句 'no-constant-condition': [ 'error', { checkLoops: false } ], // 禁止在正则表达式中出现 Ctrl 键的 ASCII 表示，即禁止使用 /\x1f/ // 开启此规则，因为字符串中一般不会出现 Ctrl 键，所以一旦出现了，可能是一个代码错误 'no-control-regex': 'error', // @fixable 禁止使用 debugger 'no-debugger': 'error', // 禁止在函数参数中出现重复名称的参数 'no-dupe-args': 'error', // 禁止在对象字面量中出现重复名称的键名 'no-dupe-keys': 'error', } }; |
使用方法
标准规则
安装
|
1 |
npm install --save-dev eslint-config-alloy babel-eslint |
配置 .eslintrc.js
在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：
|
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 |
module.exports = { extends: [ 'eslint-config-alloy', ], globals: { // 这里填入你的项目需要的全局变量 // 这里值为 false 表示这个全局变量不允许被重新赋值，比如： // // jQuery: false, // $: false }, rules: { // 这里填入你的项目需要的个性化配置，比如： // // // @fixable 一个缩进必须用两个空格替代 // 'indent': [ // 'error', // 2, // { // SwitchCase: 1, // flatTernaryExpressions: true // } // ] } }; |
React 版
安装
|
1 |
npm install --save-dev eslint-config-alloy eslint-plugin-react babel-eslint |
配置 .eslintrc.js
在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：
|
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 |
module.exports = { extends: [ 'eslint-config-alloy/react', ], globals: { // 这里填入你的项目需要的全局变量 // 这里值为 false 表示这个全局变量不允许被重新赋值，比如： // // React: false, // ReactDOM: false }, rules: { // 这里填入你的项目需要的个性化配置，比如： // // // @fixable 一个缩进必须用两个空格替代 // 'indent': [ // 'error', // 2, // { // SwitchCase: 1, // flatTernaryExpressions: true // } // ], // // @fixable jsx 的 children 缩进必须为两个空格 // 'react/jsx-indent': [ // 'error', // 2 // ], // // @fixable jsx 的 props 缩进必须为两个空格 // 'react/jsx-indent-props': [ // 'error', // 2 // ] } }; |
Vue 版
安装
|
1 |
npm install --save-dev eslint-config-alloy eslint-plugin-vue babel-eslint |
配置 .eslintrc.js
在你的项目根目录下创建 .eslintrc.js，并将以下内容复制到文件中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
module.exports = { extends: [ 'eslint-config-alloy/vue', ], globals: { // 这里填入你的项目需要的全局变量 // 这里值为 false 表示这个全局变量不允许被重新赋值，比如： // // Vue: false }, rules: { // 这里填入你的项目需要的个性化配置，比如： // // // @fixable 一个缩进必须用两个空格替代 // 'indent': [ // 'error', // 2, // { // SwitchCase: 1, // flatTernaryExpressions: true // } // ] } }; |
代码改造经验
如果是一个新项目，应用一个比较严格的 ESLint 规则并不是一件难事。
但是如果是一个已经维护多年的老项目，那么突然引入 ESLint 就会有成千上万个错误。这个时候该如何改造呢？
1. 将所有报错的配置都关闭
运行 ESLint 之后，会有很多错误，这时候我们可以把他们先暂时关闭掉。
由于项目还在不停地迭代，这样可以保证其他不会报错的规则能够应用到新增的文件上。
这时你的 .eslintrc.js 应该类似与下面的样子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
module.exports = { extends: [ '@alloyteam/eslint-config-standard', ], globals: { React: false, jQuery: false, $: false }, rules: { 'no-dupe-keys': 'off', 'no-var': 'off', 'complexity': 'off', 'indent': 'off' } }; |
小技巧：如果报错的规则太多了，可以在运行 ESLint 的时候，加上参数 -f json，这样的话会以 json 格式输出，然后稍作处理就可以直接得到所有报错的规则了。
注意：一开始不要开启 --fix，因为修复的太多了，就难以 review 代码了。
2. 针对每个配置，修复所有报错的文件，优先修复能够 autofix 的配置
将 .eslintrc.js 中的 rules 删掉一行，然后重新执行 ESLint 检查。
- 如果可以 autofix，则加上
--fix即可 - 如果不能 autofix，则需要一个文件一个文件的手动修改
建议优先修复能够 autofix 的配置。
在这一步中，我们一次只修复一个 ESLint 配置，这样的好处是 code review 的时候，目的很明确，不会出现问题。
小技巧：如果一个配置不能 autofix，又有很多文件报错，那么可以尝试写一些脚本去处理，利用 ESLint 中的参数 -f json，可以解析到所有报错的文件和报错的行数。
小技巧：如果写脚本也难以处理，那么可以用编辑器的宏功能快速的执行重复的操作，对于 VSCode，可以使用这个工具： https://github.com/geddski/macros
注意：不要陷于某一个配置的泥潭，优先解决容易修复的问题。
3. 针对难以修复的配置，将报错的文件忽略掉对应的规则，将来再慢慢修复
有时一个配置需要理解业务逻辑，读懂上下文，很难去修复。
这个时候，可以在报错的文件头部加上 ESLint 注释，忽略掉对应的规则，将来只要搜索对应的 ESLint 注释就可以一个文件一个文件的修复问题了。
比如 eqeqeq 限制必须使用 === 而不是 ==，代码中使用了 if (result == '2')，然而我们并不知道 ajax 返回的数据是 number 还是 string。这时候就可以在对应的文件头部加上：
|
1 |
/* eslint eqeqeq:0 */ |
这样就可以针对这个文件关闭掉 eqeqeq 这个规则了。
相比于将规则在 .eslintrc.js 中关闭，将 ESLint 注释添加到对应文件的头部的好处是：这些规则虽然对老文件不起效，但是新文件都需要遵守这些规则了。
小技巧：如果需要修改的文件太多了，可以使用我们开发的小工具，批量给文件添加 ESLint 注释。
编辑器插件对 ESLint 的支持
所有编辑器对 ESLint 的支持都很好，可以参考这个页面安装你的编辑器插件。
以 VSCode 举例，在插件栏中下载安装 ESLint 之后，编写 js 代码时就会有类似下图的提示了：
注意：如果提示说 ESLint 未安装，则需要在命令行安装项目级别的 ESLint，或全局安装 ESLint：
|
1 |
npm install -g eslint |
VSCode 设置中也可以配置一些 ESLint 选项（以及其他相关选项），比如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ // 关闭编辑器自带的 js 检查，建议关闭 "javascript.validate.enable" : false, // ESLint 在保存时自动修复错误 "eslint.autoFixOnSave": true, // 输出 ESLint 执行时的 log，ESLint 不生效的时候可以启用看看 // "eslint.trace.server": "messages", // 配置 ESLint 检查的文件类型，这个配置包括 .js, .jsx, .html, .vue "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], } |
快来使用 AlloyTeam ESLint 规则吧！
Jessie 2018 年 1 月 4 日
为什么这些插件都要全局装呢
fiture 2017 年 9 月 25 日
去腾讯了？
xcatliu 2017 年 9 月 25 日
嗯是呀
ixx 2018 年 4 月 20 日
我也想问来着。。。。
whinc 2017 年 9 月 6 日
用 javascript standard style 就好了，省去配置的麻烦，而且与社区风格保持一致
孟陬 2017 年 9 月 5 日
为什么要重复造轮子，Airbnb 的 eslint 规则不就已经 ok 了吗？而且 eslint 本身支持 extend
xcatliu 2017 年 9 月 5 日
重复造轮子的原因是，airbnb 的规则有一些不适合我们团队，所以想改一下，慢慢的就改的越来越多。而我们又要同时维护多个项目，导致需要维护多份 eslintrc。所以干脆自己重新做个适合我们团队的配置文件了。
阿伟 2017 年 8 月 30 日
使用了 ESLint 后，瞬间感觉代码效率低很多的样子，哪都报错
xcatliu 2017 年 9 月 5 日
可以先将报错的文件都 ignore 掉，这样新增的文件就符合了规则。将来再慢慢改正旧文件
Lewischeng 2017 年 8 月 28 日
好文，可以考虑集成到 Commit hook 里面去，代码提交前做校验。