OneYoung

Appearance

Eslint 可以通过配置文件、代码注释 /* eslint */以及 package.json 中的 eslintConfig 来设置。

2-1.类别 ​

配置文件的命名通常是 .eslintrc，根据文件类别，可以分为以下几种(同一目录下，优先级从高到低)：

  • JavaScript - .eslintrc.js 笔者推荐项，易于扩展。
  • JavaScript (ESM)
  • YAML - .eslintrc.yaml 或者 .eslintrc.yml
  • JSON - .eslintrc.json
  • package.json

TIP

譬如：如果在同一目录下，同时存在 .eslintrc.* 和 package.json 文件，

则 .eslintrc.* 的优先级更高，package.json 文件中的 eslintConfig 配置不会被采用。

2-2.执行逻辑 ​

从 lint 的目标文件所在目录开始，依次向上每个目录寻找 .eslintrc.* 文件，直到某 .eslintrc.* 文件声明了 root: true 属性、或项目根目录 / 为止。

如果上述两项都没有找到对应配置文件，则会在用户根目录 ~/ 判定是否有全局配置。

=> Cascading and Hierarchy

当使用 .eslintrc.* 或者 package.json 配置时，不同目录下的配置文件有级联优先级。

假设有如下的结构：

your-project
├── .eslintrc.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc.json
  └── test.js

首先，以被 lint 的目标文件所在目录为起始，该层目录下的 .eslintrc.* 文件的优先级最高。

然后 Eslint 会随着目录层级依次向上递归搜索配置文件，并合并配置选项，直到某一目录下的 .eslintrc 文件设置了 root: true、或者项目根目录 /、或者用户根目录 ~/。

类似的，如果项目根目录下有一个配置了 eslintConfig 属性的 package.json 文件，则该根目录配置会对所有子目录都生效。

如果根目录配置与在 tests/ 下的 .eslintrc.* 文件配置出现了冲突，则后者的配置属性优先级更高，会覆盖前者的配置属性。

your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc.json
  └── test.js

TIP

正如上文所说，Eslint 默认会搜索所有层级目录中的配置文件，这其实是为了方便每一个目录能够定制化的设置一些 lint 配置。

但在某些情况（项目系统比较庞大）下，这种特点会越来越不可控。

因此，Eslint 提供了 root: true 这个配置，来方便用户更加精细的控制配置级联层级和权重。

例如，在 lib/ 下的 .eslintrc.js 配置了 root: true，那么当将 lib/main.js 文件作为 lint 的目标时，projectA/.eslintrc.js 并不会生效。

home
└── user
    └── projectA
        ├── .eslintrc.js  <- Not used
        └── lib
            ├── .eslintrc.js  <- { root: true }
            └── main.js

总结：

Eslint 的级联配置，从高到底的优先级，如下：

  1. 代码注释
  2. /*eslint-disable*/ /*eslint-enable*/
  3. /*global*/
  4. /*eslint*/
  5. /*eslint-env*/
  6. 命令行选项
  7. --global
  8. --rule
  9. --env
  10. -c, --config
  11. 项目级配置
  12. 与 lint 目标文件同一级目录下的 .eslintrc.* 或 package.json 文件。
  13. 由 lint 目标文件所在目录为起始，向上递增查找 .eslintrc.* 或 package.json 文件，直到文件根目录 /、 或查找到文件带有 root: true 配置。
  14. 如果不满足 1 和 3 这两种情况，则会到 ~/.eslintrc 中寻找自定义配置。

TIP

另外，要注意的是，用户级目录 ~/ 已经不被推荐了。

=> Personal Configuration Files (deprecated)

2-3.使用方式 ​

  1. 当文件被 lint 时，Eslint 会根据上述的规则和优先级，自动找寻并使用相关配置文件。
  2. 使用 -c 指令，手动指定配置文件。

TIP

在使用 -c 指令时，依然会受到上级目录中的 .eslintrc.* 文件的影响。如果想要避免这种影响，可以使用 --no-eslintrc。

譬如 eslint -c libs/.eslintrc.json main.js --no-eslintrc。

2-4.可定义属性 ​

配置文件中除了上面的 root: true 外还有许多可定义属性，以 .eslintrc.js 为例：

js
module.exports = {
  root: true,
  globals: {},
  env: {},
  parserOptions: {},
  rules: {},
  extends: {},
  configs: {},
  plugins: {},
  overrides: []
}