前言
作为一名程序员都知道代码的规范性不止可以养成个人的编程习惯，还可以便于团队合作间代码的阅读。近几年也衍生出了很多代码检查工具，从JSLint,JSHint到ESLint，都给程序员们提供了良好的代码检查工具。
今天看到一篇关于介绍ESLint的文章，文章里基本上把ESLint中常用的配置都加上了中文的解释，这无疑是便于阅读与理解。ESLint中的规则配置有很多，可以根据个人/团队后者项目的需求去进行配置。
ESLint 支持几种格式的配置文件：
JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
(弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
-
package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。
如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- .eslintrc
- package.json
.eslintrc.js配置文件
// .eslintrc.js
module.exports = {
// 指定解析器
'parse': '',
// 指定解析器选项
'parserOptions': {
// 默认设置为3，5（默认），可使用 6、7、8 或 9 来指定想要使用的 ECMAScript 版本。也可使用年份命名的版本号指定为 2015（同 6），2016（同7），或 2017（同8）或 2018（同9）
"ecmaVersion": 6,
// 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
"sourceType": "module",
// 对象，表示想使用的额外的语言特性
"ecmaFeatures": {
"jsx": true // 启用 JSX
"globalReturn": true // 允许在全局作用域下使用 return 语句
"impliedStrict": true // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
}
},
// 指定脚本的运行环境
'env': {},
// 别人可以直接使用你配置好的ESLint, ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
'root': true,
// 脚本在执行期间访问的额外的全局变量
'globals': {},
// 使用 "extends": "eslint:recommended" 可启用推荐的规则
"extends": "eslint:recommended",
// 启用的规则及其各自的错误级别
'rules': {
"semi": 2
}
};
ESLint规则
为了对规则有个更好的理解，ESLint 对其进行了分门别类。下面是每个类别中比较常用的规则。
Possible Errors （JavaScript 代码中可能的错误或逻辑错误）
| 规则 | 解释 |
|---|---|
| no-console | 禁用 console |
| no-await-in-loop | 禁止在循环中出现 await |
| no-cond-assign | 禁止条件表达式中出现赋值操作符 |
| no-constant-condition | 禁止在条件中使用常量表达式 |
| no-debugger | 禁用 debugger |
| no-dupe-args | 禁止 function 定义中出现重名参数 |
| no-dupe-keys | 禁止对象字面量中出现重复的 key |
| no-duplicate-case | 禁止出现重复的 case 标签 |
| no-empty | 禁止出现空语句块 |
| no-empty-character-class | 禁止在正则表达式中使用空字符集 |
| no-extra-boolean-cast | 禁止不必要的布尔转换 |
| no-extra-parens | 禁止不必要的括号 |
| no-extra-semi | 禁止不必要的分号 |
| no-func-assign | 禁止对 function 声明重新赋值 |
| no-inner-declarations | 禁止在嵌套的块中出现变量声明或 function 声明 |
| no-irregular-whitespace | 禁止在字符串和注释之外不规则的空白 |
| no-obj-calls | 禁止把全局对象作为函数调用 |
| no-regex-spaces | 禁止正则表达式字面量中出现多个空格 |
| no-unreachable | 禁止在return、throw、continue 和 break 语句之后出现不可达代码 |
| valid-typeof | 强制 typeof 表达式与有效的字符串进行比较 |
Stylistic Issues (关于风格指南)
| 规则 | 解释 |
|---|---|
| array-bracket-newline | 在数组开括号后和闭括号前强制换行 |
| array-bracket-spacing | 强制数组方括号中使用一致的空格 |
| array-element-newline | 强制数组元素间出现换行 |
| block-spacing | 禁止或强制在代码块中开括号前和闭括号后有空格 |
| brace-style | 强制在代码块中使用一致的大括号风格 |
| camelcase | 强制使用骆驼拼写法命名约定 |
| comma-dangle | 要求或禁止末尾逗号 |
| comma-style | 强制使用一致的逗号风格 |
| computed-property-spacing | 强制在计算的属性的方括号中使用一致的空格 |
| eol-last | 要求或禁止文件末尾存在空行 |
| func-call-spacing | 要求或禁止在函数标识符和其调用之间有空格 |
| function-paren-newline | 强制在函数括号内使用一致的换行 |
| implicit-arrow-linebreak | 强制隐式返回的箭头函数体的位置 |
| indent | 强制使用一致的缩进 |
| jsx-quotes | 强制在 JSX 属性中一致地使用双引号或单引号 |
| multiline-ternary | 要求或禁止在三元操作数中间换行 |
| new-cap | 要求构造函数首字母大写 |
| new-parens | 要求调用无参构造函数时有圆括号 |
| eqeqeq | 要求使用 === 和 !== |
| no-trailing-spaces | 禁用行尾空格 |
ECMAScript 6
| 规则 | 解释 |
|---|---|
| no-const-assign | 禁止修改 const 声明的变量 |
| no-dupe-class-members | 禁止类成员中出现重复的名称 |
| no-duplicate-imports | 禁止重复模块导入 |
| no-restricted-imports | 禁止使用指定的 import 加载的模块 |
| no-this-before-super | 禁止在构造函数中，在调用 super() 之前使用 this 或 super |
| no-useless-computed-key | 禁止在对象中使用不必要的计算属性 |
| no-useless-constructor | 禁用不必要的构造函数 |
| no-useless-ren | 要求使用 let 或 const 而不是 var |
| object-shorthand | 要求或禁止对象字面量中方法和属性使用简写语法 |
| prefer-arrow-callback | 要求回调函数使用箭头函数 |
| prefer-const | 要求使用 const 声明那些声明后不再被修改的变量 |
