ESLint 规则入门：如何配置重要性及选项（2）
规则是 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 参数自动修复。 | 此规则报告的一些问题可以通过编辑器建议手动修复。 |
原文地址：https://blog.csdn.net/weixin_53961451/article/details/144163453
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！