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: |