ESLint

前言

作为一名程序员都知道代码的规范性不止可以养成个人的编程习惯，还可以便于团队合作间代码的阅读。近几年也衍生出了很多代码检查工具，从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 声明那些声明后不再被修改的变量