ESLint 规则入门：如何配置重要性及选项（2）

规则是 ESLint 中一个比较重要的核心概念之一，因为究竟报不报错，是由规则来确定的。

在 ESLint 中，本身可以配置规则的重要性，总共分为三个级别：

例如：

js 复制代码

{
  "rules": {
    "no-undef": "error",
    "semi": ["warn", "always"]
  }
}

在上面的规则配置中，semi 对应的值为一个数组，数组的第一项是上面所说的规则重要性，第二项则是该条规则配置可选项，关于这个配置可选项，不同的规则能够填入的值是不一样的。关于具体能够填写的值，那么就要去这条规则的说明页面去查阅。

接下来我们就针对 semi 这条规则做一个介绍，semi 可配置值如下：

ASI 英语全称叫做 automatic semicolon insertion，这个翻译成中文就是自动分号插入。所谓 ASI 风险，是指由于有这个机制，可能会导致意外的行为或者错误。

js 复制代码

function example() {
   return
       {
           message: 'Hello, world!'
       }
}

在上面的代码中，我们本意是要返回一个对象，但是由于 ASI 机制，这里就会产生意外的行为，导致这个函数返回一个 undefined 而非预期的对象。

如果值为 always，那么还可以配置一个额外的对象：

如果值为 never，那么也是可以配置一个额外的名为 beforeStatementContinuationChars 的对象：

"beforeStatementContinuationChars ": "any"（默认）：如果下一行以 $, (, /, +, 或 -$ 开始，则忽略语句末尾的分号（或缺少分号）

js 复制代码

let a = 1
+1 // 正确：分号被忽略

let b = 2
;+2 // 正确：分号也可以

"beforeStatementContinuationChars ": "always"：如果下一行以 $, (, /, +, 或 -$ 开始，则要求在语句末尾使用分号

js 复制代码

let a = 1
+1 // 错误：要求在语句末尾使用分号

let b = 2
;+2 // 正确：添加了分号

"beforeStatementContinuationChars ": "never "：即使下一行以 $, (, /, +, 或 -$ 开始，只要没有引起 ASI （Automatic Semicolon Insertion，自动分号插入）的风险，也禁止在语句末尾使用分号

js 复制代码

let a = 1
+1 // 正确：没有 ASI 风险，不需要分号

let b = 2
;+2 // 错误：不允许在没有 ASI 风险的情况下使用分号

在具体的代码文件里面，可以以注释的方式来配置规则

js 复制代码

/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */
/* eslint quotes: ["error", "double"], curly: 2 */

规则注释的优先级会高于配置文件里面的规则。

一般在如下的场景中可能会涉及到使用注释规则：

js 复制代码

/* eslint-disable */
console.log('Hello')
/* eslint-enable */

或者只禁用某一个规则

js 复制代码

/* eslint-disable semi */
console.log("Hello");
/* eslint-enable semi */

js 复制代码

/* eslint-env node, mocha */

在上面的注释汇总，我们声明 ESLint 的检查环境为 node 和 mocha，这就意味着在检查该文件的时候，ESLint 会预设一些 node 和 mocha 中的全局变量，比如 process、describe、it。

js 复制代码

// eslint-disable-next-line no-unused-vars
const tempVariable = 'Temporarily not used';

在上面的注释中，我们使用了 eslint-disable-next-line，代表只禁用下一行的代码检查，后面跟上了具体的规则，表示禁用下一行代码的某一条规则的检查，不影响之后的代码。

另外在配置文件中，有如下的配置选项：

例如：

js 复制代码

/* eslint-disable-next-line no-console */
console.log('Hello');

上面的代码是可以正常工作的，eslint-disable-next-line no-console 这条行内注释规则是有用的，但是如果我们把下面的 console 注释调用：

js 复制代码

/* eslint-disable-next-line no-console */
// console.log('Hello');

那么上面的这一条行内注释规则就变成了一条无用的注释规则

你可以在 https://eslint.org/docs/latest/rules/ 看到 ESLint 里面的所有规则

在官方的规则参照表中，每一条规则后面有三个符号，对应的含义如下：

✅	🔧	💡
在配置文件中的 "extends ": "eslint :recommended" 属性会启用此规则。	此规则报告的一些问题可以通过 --fix 参数自动修复。	此规则报告的一些问题可以通过编辑器建议手动修复。