规则是 ESLint 中一个比较重要的核心概念之一,因为究竟报不报错,是由规则来确定的。
规则的重要性
在 ESLint 中,本身可以配置规则的重要性,总共分为三个级别:
- off 或者 0: 关闭这条规则
- warn 或者 1:这条规则的级别为警告级别
- error 或者 2:这条规则的级别为错误级别
例如:
{"rules": {"no-undef": "error","semi": ["warn", "always"]}
}
在上面的规则配置中,semi 对应的值为一个数组,数组的第一项是上面所说的规则重要性,第二项则是该条规则配置可选项,关于这个配置可选项,不同的规则能够填入的值是不一样的。关于具体能够填写的值,那么就要去这条规则的说明页面去查阅。
接下来我们就针对 semi 这条规则做一个介绍,semi 可配置值如下:
- always:这是默认值,代表语句结束需要插入分号
- never: 在没有 ASI 风险情况下,不需要插入分号
ASI 英语全称叫做 automatic semicolon insertion,这个翻译成中文就是自动分号插入。所谓 ASI 风险,是指由于有这个机制,可能会导致意外的行为或者错误。
function example() {return{message: 'Hello, world!'}
}
在上面的代码中,我们本意是要返回一个对象,但是由于 ASI 机制,这里就会产生意外的行为,导致这个函数返回一个 undefined 而非预期的对象。
如果值为 always,那么还可以配置一个额外的对象:
- omitLastInOneLineBlock:配置为 true,表示禁止在单行代码块中的最后一个语句使用分号
- omitLastInOneLineClassBody:配置为 true,表示禁止在单行类里面的最后一个语句使用分号
如果值为 never,那么也是可以配置一个额外的名为 beforeStatementContinuationChars 的对象:
- “beforeStatementContinuationChars”: “any”(默认):如果下一行以[, (, /, +, 或 -]开始,则忽略语句末尾的分号(或缺少分号)
let a = 1
+1 // 正确:分号被忽略let b = 2
;+2 // 正确:分号也可以
- “beforeStatementContinuationChars”: “always”:如果下一行以[, (, /, +, 或 -]开始,则要求在语句末尾使用分号
let a = 1
+1 // 错误:要求在语句末尾使用分号let b = 2
;+2 // 正确:添加了分号
- “beforeStatementContinuationChars”: “never”:即使下一行以[, (, /, +, 或 -]开始,只要没有引起 ASI(Automatic Semicolon Insertion,自动分号插入)的风险,也禁止在语句末尾使用分号
let a = 1
+1 // 正确:没有 ASI 风险,不需要分号let b = 2
;+2 // 错误:不允许在没有 ASI 风险的情况下使用分号
规则注释
在具体的代码文件里面,可以以注释的方式来配置规则
/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */
/* eslint quotes: ["error", "double"], curly: 2 */
规则注释的优先级会高于配置文件里面的规则。
一般在如下的场景中可能会涉及到使用注释规则:
- 针对特定的文件或者代码片段需要指定特殊规则,比如我们针对某一个代码片段去禁用 ESLint 检查
/* eslint-disable */
console.log('Hello')
/* eslint-enable */
或者只禁用某一个规则
/* eslint-disable semi */
console.log("Hello");
/* eslint-enable semi */
- 指定某个文件的特殊配置,有时我们需要针对某个文件指定和其他文件不同的 ESLint 配置,这种情况下也可以使用注释的形式,这样就不需要去修改主要的配置文件
/* eslint-env node, mocha */
在上面的注释汇总,我们声明 ESLint 的检查环境为 node 和 mocha,这就意味着在检查该文件的时候,ESLint 会预设一些 node 和 mocha 中的全局变量,比如 process、describe、it。
- 临时禁用某条规则
// eslint-disable-next-line no-unused-vars
const tempVariable = 'Temporarily not used';
在上面的注释中,我们使用了 eslint-disable-next-line,代表只禁用下一行的代码检查,后面跟上了具体的规则,表示禁用下一行代码的某一条规则的检查,不影响之后的代码。
另外在配置文件中,有如下的配置选项:
- noInlineConfig:禁止行内注释形式的规则
- reportUnusedDisableDirectives:用于是否报告有未使用的 eslint-disable 指令
例如:
/* eslint-disable-next-line no-console */
console.log('Hello');
上面的代码是可以正常工作的,eslint-disable-next-line no-console 这条行内注释规则是有用的,但是如果我们把下面的 console 注释调用:
/* eslint-disable-next-line no-console */
// console.log('Hello');
那么上面的这一条行内注释规则就变成了一条无用的注释规则
更多关于行内注释规则,可以参阅官网资料:https://eslint.org/docs/latest/use/configure/rules#using-configuration-comments
规则参照表
你可以在 https://eslint.org/docs/latest/rules/ 看到 ESLint 里面的所有规则
在官方的规则参照表中,每一条规则后面有三个符号,对应的含义如下:
✅ | 🔧 | 💡 |
---|---|---|
在配置文件中的 “extends”: “eslint:recommended” 属性会启用此规则。 | 此规则报告的一些问题可以通过 –fix 参数自动修复。 | 此规则报告的一些问题可以通过编辑器建议手动修复。 |