OneYoung

Appearance

属性 rules 是 Eslint 的核心。

所有的规则都依赖此属性来定义。

4-1.规则等级 ​

rules 的规则等级有：

  1. off 0 规则关闭。
  2. warn 1 警告级别，不会影响代码执行。
  3. error 2 错误级别，阻断代码执行。

4-2.配置方式 ​

rules 的配置方式有 4 种：

  1. 通过代码注释(权重最高)。如果想要禁止使用代码注释来设置的话，可以使用 noInlineConfig: true 来禁用。
js
/* eslint semi: "warn", quotes: ["error", "double"] 
-- 
需要冒号 双引号
*/

TIP

代码注释这种方式的配置 rules，在该文件内全局生效，该注释的书写位置并不影响实际的检测结果。

这种注释不起作用 // eslint semi: "warn"，推荐使用这种形式 /* eslint semi: "warn" */

还可以利用 -- 为注释添加额外说明，方便使用者的后期维护。（两个或两个以上的 -）

  1. 通过命令行参数。
shell
eslint ./main.js --rule "{semi: warn, eqeqeq: [error]}"

#or

eslint ./main.js --rule 'semi: warn' --rule 'eqeqeq: [error]'
  1. 通过 .eslintrc.* 配置文件。
js
// .eslintrc.js
module.exports = {
  rules: {
    semi: "warn",
    eqeqeq: ["error", "double"]
  }
}
  1. 通过 package.json 文件中的 eslintConfig: { rules: {} }

4-3.来源分类 ​

rules 的来源分类有 4 种：

  1. 自定义 rules。
  2. eslint 的内置 rules，可以通过 extends: "eslint:recommend" 引入。
  3. 通过 eslint-config-* 等相关扩展引入，譬如 exetends: "eslint-config-airbnb-base"。
  4. 通过 eslint-plugin-* 等相关插件引入，譬如 extends: "plugin:vue/essential"，利用的是 eslint-plugin-vue。

4-4.禁用与启用 ​

rules 的禁用与启用有 2 种方式：

  1. 通过代码注释中的 disable 与 enable 来声明。
js
/* eslint-disable -- 禁用该行以下的所有规则 */

/* eslint-disable no-console, semi -- 禁用该行以下的某些规则 */

/* eslint-disable-line -- 禁用该行的所有规则 */

/* eslint-disable-line no-console, semi -- 禁用该行的某些规则 */

/* eslint-disable-next-line -- 禁用下一行的所有规则 */

/* eslint-disable-next-line no-console, semi -- 禁用下一行的某些规则 */

/* eslint-enable -- 启用该行以下的所有代码 */
  1. 或者通过 .eslintrc.* 中的 overrides 来重写，将对应的规则置为 off。