ESLint通关小册

Appearance

Return to top
On this page

规则

配置规则

ESLint 内置了大量规则，您可以通过插件添加更多规则。您可以使用配置注释或配置文件来修改项目使用的规则。要更改规则设置，您必须将规则 ID 设置为以下值之一：

  • "off"或0- 关闭规则
  • "warn"或1- 打开规则作为警告（不影响退出代码）
  • "error"或2- 将规则作为错误打开（触发时退出代码为 1）

使用配置注释

要使用配置注释在文件内配置规则，请使用以下格式的注释：

/* eslint eqeqeq: "off", curly: "error" */

在此示例中，eqeqeq 关闭并 curly 作为错误打开。您还可以对规则严重性使用数字等价物：

/* eslint eqeqeq: 0, curly: 2 */

此示例与上一个示例相同，只是它使用数字代码而不是字符串值。规则已eqeqeq关闭且curly规则设置为错误。

如果规则有其他选项，您可以使用数组文字语法指定它们，例如：

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

此注释指定 quotes 规则的“双重”选项。数组中的第一项始终是规则严重性（数字或字符串）。

配置注释可以包括说明为什么需要注释。-描述必须出现在配置之后，并且由两个或多个连续字符与配置分开。例如：

/* eslint eqeqeq: "off", curly: "error" -- Here's a description about why this configuration is necessary. */
/* eslint eqeqeq: "off", curly: "error"
    --------
    Here's a description about why this configuration is necessary. */
/* eslint eqeqeq: "off", curly: "error"
 * --------
 * This will not work due to the line above starting with a '*' character.
 */

使用配置文件

要在配置文件中配置规则，请使用rules的 Key(键值) 以及错误级别和您要使用的任何选项。例如：

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

在 YAML 中：

---
rules:
  eqeqeq: off
  curly: error
  quotes:
    - error
    - double

要配置在插件中定义的规则，您必须在规则 ID 前加上插件名称和/. 例如：

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

在 YAML 中：

---
plugins:
  - plugin1
rules:
  eqeqeq: 0
  curly: error
  quotes:
    - error
    - "double"
  plugin1/rule1: error

在这些配置文件中，规则plugin1/rule1来自名为plugin1. 您还可以将此格式与配置注释一起使用，例如：

/* eslint "plugin1/rule1": "error" */

注意： 从插件中指定规则时，请确保省略eslint-plugin-. ESLint 在内部仅使用无前缀名称来定位规则。

禁用规则

使用配置注释

要暂时禁用文件中的规则警告，请使用以下格式的块注释：

/* eslint-disable */

alert('foo');

/* eslint-enable */

⚠️注意这里禁用和开启必须是在 rules 里面开启过后才能选择在注释进行开启或者关闭

您还可以禁用或启用特定规则的警告：

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

注意： /* eslint-enable */没有列出任何特定规则将导致所有禁用的规则重新启用。

要在整个文件中禁用规则警告，请在文件/* eslint-disable */顶部添加块注释：

/* eslint-disable */

alert('foo');

您还可以禁用或启用整个文件的特定规则：

/* eslint-disable no-alert */

alert('foo');

确保永远不会应用规则（无论将来有任何启用/禁用行）：

/* eslint no-alert: "off" */

alert('foo');

要禁用特定行上的所有规则，请使用以下格式之一的行或块注释：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

要禁用特定行上的特定规则：

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');

要禁用特定行上的多个规则：

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

alert('foo'); /* eslint-disable-line no-alert, quotes, semi */

/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');

/* eslint-disable-next-line
  no-alert,
  quotes,
  semi
*/
alert('foo');

以上所有方法也适用于插件规则。例如，要禁用eslint-plugin-example的rule-name规则，请将插件的名称 ( example) 和规则的名称 ( rule-name) 组合成example/rule-name：

foo(); // eslint-disable-line example/rule-name
foo(); /* eslint-disable-line example/rule-name */

配置注释可以包括说明为什么需要注释。描述必须在配置之后，并且需要与配置相隔两个或多个连续-字符。例如：

// eslint-disable-next-line no-console -- Here's a description about why this configuration is necessary.
console.log('hello');

/* eslint-disable-next-line no-console --
 * Here's a very long description about why this configuration is necessary
 * along with some additional information
**/
console.log('hello');

注意： 为文件的一部分禁用警告的注释告诉 ESLint 不要报告禁用代码的规则违规。然而，ESLint 仍然解析整个文件，因此禁用的代码仍然需要是语法上有效的 JavaScript。

使用配置文件

要在一组文件的配置文件中禁用规则，请使用overrides键和files键。例如：

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

禁用内联注释

要禁用所有内联配置注释，请使用该noInlineConfig设置。例如：

{
  "rules": {...},
  "noInlineConfig": true
}

此设置类似于 –no-inline-config CLI 选项。

报告未使用的eslint-disable评论

要报告未使用eslint-disable的评论，请使用该reportUnusedDisableDirectives设置。例如：

{
  "rules": {...},
  "reportUnusedDisableDirectives": true
}

此设置类似于 –report-unused-disable-directives CLI 选项，但不会导致 linting 失败（报告为"warn"严重性）。

实战

目标 ： 不允许使用 alert()

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
        "indent":[
            "error",
            2
        ],
        "linebreak-style":[
            "error",
            "unix"
        ],
        "quotes":[
            "error",
            "single"
        ],
        "semi":[
            "error",
            "never"
        ],
        "no-alert":"error" //👈
    }
}

image-20220626174647604

Released under the MIT License.

Copyright © 2022-present sudongyuer