Allen's blog
Allen
2023-02-17
目录

ESLint笔记

  • ESLint 使用 Espree 解析 JavaScript。
  • ESLint 使用 AST 去分析代码中的模式
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

# 安装

  1. npm 安装依赖

        npm install eslint --save-dev
    1

  2. 紧接着你应该设置一个配置文件：

        ./node_modules/.bin/eslint --init
    1

  3. 之后，你可以在任何文件或目录上运行 ESLint 如下：

        ./node_modules/.bin/eslint yourfile.js
    1

# 配置

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}
1
2
3
4
5
6

"semi" 和 "quotes" 是 ESLint 中 规则 (opens new window) 的名称。第一个值是错误级别，可以使下面的值之一：

"off" or 0 - 关闭规则 "warn" or 1 - 将规则视为一个警告（不会影响退出码） "error" or 2 - 将规则视为一个错误 (退出码为 1)

这三个错误级别可以允许你细粒度的控制 ESLint 是如何应用规则（更多关于配置选项和细节的问题，请查看配置文件 (opens new window)） 所有规则默认禁用 你的 .eslintrc 配置文件可以包含下面的一行：

"extends": "eslint:recommended"
1

由于这行，所有在 规则页面 (opens new window) 被标记为 “✔” 的规则将会默认开启。另外，你可以在 npmjs.com (opens new window) 搜索 “eslint-config” 使用别人创建好的配置。只有在你的配置文件中扩展了一个可分享的配置或者明确开启一个规则，ESLint 才会去校验你的代码。

# ESLint 高级配置

有两种主要的方式来配置 ESLint：

  1. Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
  2. Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.\* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。 有很多信息可以配置：
  • Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
  • Globals - 脚本在执行期间访问的额外的全局变量。
  • Rules - 启用的规则及其各自的错误级别。

所有这些选项让你可以细粒度地控制 ESLint 如何对待你的代码。

# 指定解析器选项(Specifying Parser Options)

ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

请注意，支持 JSX 语法并不等同于支持 React。React 对 ESLint 无法识别的 JSX 语法应用特定的语义。如果你正在使用 React 并且想要 React 语义支持，我们建议你使用 eslint-plugin-react。 同样的，支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）。对于 ES6 语法，使用 { "parserOptions": { "ecmaVersion": 6 } }；对于新的 ES6 全局变量，使用 { "env":{ "es6": true } }. { "env": { "es6": true } } 自动启用 es6 语法，但 { "parserOptions": { "ecmaVersion": 6 } } 不自动启用 es6 全局变量。

解析器选项可以在 .eslintrc.* 文件使用 parserOptions 属性设置。可用的选项有：

  • ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
  • sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
  • ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
    • globalReturn - 允许在全局作用域下使用 return 语句
    • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 启用 JSX
    • experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(重要：这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能，除非当它发生改变时你愿意承担维护成本。)
{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false

注意：如果要使用最新版本的ecmaVersion，可以引入espree，将ecmaVersion设置为espree.latestEcmaVersion

# 指定解析器(Specifying Parser)

ESLint 默认使用 Espree 作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

  1. 它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
  2. 它必须符合 parser interface。

注意，即使满足这些兼容性要求，也不能保证一个外部解析器可以与 ESLint 正常配合工作，ESLint 也不会修复与其它解析器不兼容的相关 bug。

以下解析器与 ESLint 兼容：

注意，在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions，但是不一定会使用它们来决定功能特性的开关。

# 指定处理器(Specifying Processor) (opens new window)

处理器可以从一种非 js 文件中提取并处理 js 代码，如.vue，.ts

如果要使用插件中的处理器：

{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}
1
2
3
4

如果要为特定类型的文件指定处理器，使用 overides 和 processor 结合：

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}
1
2
3
4
5
6
7
8
9

可以在 overides 配置中为代码块添加指定配置，例如，下面的命令对以 .js 结尾的 markdown 文件中的已命名代码块禁用 strict 规则。：

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 指定环境(Specifying Environments) (opens new window)

ESLint 中的环境表示的是运行环境，它的作用是可以注册一些全局变量，比如browser浏览器环境下，window 是一个全局变量，如果不设置env环境为browser，则会报错no-undef错误。

因此，env的作用是批量注册一些全局变量。 在配置文件中，可以这样配置：

{
    "env": {
        "browser": true,
        "node": true
    }
}
1
2
3
4
5
6

或在 package.json 中：

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}
1
2
3
4
5
6
7
8
9
10

还可以在特定插件中，使用一种环境：

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}
1
2
3
4
5
6

也可以单独配置一些全局变量，使用global配置项。

# 指定全局变量(Specifying Globals) (opens new window)

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

{
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}
1
2
3
4
5
6

在这些例子中 var1 允许被重写，var2 不允许被重写。 **注意：**要启用no-global-assign (opens new window)规则来禁止对只读的全局变量进行修改。

# 配置插件(Configuring Plugins) (opens new window)

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。

在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

{
    "plugins": ["plugin1", "eslint-plugin-plugin2"]
}
1
2
3

**注意：**插件是相对于 ESLint 进程的当前工作目录解析的。换句话说，ESLint 将加载与用户通过从项目 Node 交互解释器运行 ('eslint-plugin-pluginname')获得的相同的插件。

# 配置规则(Configuring Rules) (opens new window)

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

规则配置方式：

  • 文件内配置使用注释的方式
  • 使用配置文件

可以定义插件中的规则 "plugin1/rule1": "error"

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

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11

# 添加共享设置(Adding Shared Settings) (opens new window)

这个主要用在自定义规则中，需要共享相同信息时。

# 使用 extends 扩展配置文件

extends 配置项可以是：

  • 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
  • 字符串数组：每个配置继承它前面的配置

ESLint 递归地扩展配置，因此基本配置也可以具有 extends 属性。extends 属性中的相对路径和可共享配置名从配置文件中出现的位置解析。

# 从可共享的配置包中获取配置

可共享的配置 是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下。

extends 属性值可以省略包名的前缀 eslint-config-。

# 从 plugin 中获取配置

插件 是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。

plugins 属性值 可以省略包名的前缀 eslint-plugin-。

extends 属性值可以由以下组成：

  • plugin:
  • 包名 (省略了前缀，比如，react)
  • /
  • 配置名称 (比如 recommended) JSON 格式的一个配置文件的例子：
{
    "plugins": ["react"],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "no-set-state": "off"
    }
}
1
2
3
4
5
6
7

# 从文件中获取配置

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}
1
2
3
4
5
6
7
8
9
10

# 常见疑问

# plugin 和 extends 关系

plugin 是引入了一些规则 rules，也有一些规则配置。这里的规则全部是未生效状态，如果要生效，需要在 rules 里面配置或者在 extends 里面配置。plugin 也可以带一部分规则配置，可以通过 extends 引入，"extends": ["eslint:recommended", "plugin:react/recommended"] extends 最主要的功能是应用一些规则，这些规则有些是 eslint 自带的，有些是 plugin 带的。

上次更新: 2023/12/16, 09:22:46
better-scroll无限滚动
fundlint代码规范工具开发

← fundlint代码规范工具开发→

最近更新
01
rollup使用配置文件rollup.config.ts打包
12-08
02
package.json导出类型
12-08
03
关键问题方案
11-17
更多文章>
Theme by Vdoing | Copyright © 2023-2023 Allen | Github