四、ESLint的层叠配置

发表于 | 分类于 |

所谓的层叠配置就是为不同文件夹(目录)配置不同的规则。官网文档

层叠配置

当使用 .eslintrc.* 和 package.json文件的配置时，你可以利用层叠配置。例如，假如你有以下结构：

1
2
3
4
5
6
7
your-project
├── .eslintrc
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

层叠配置使用离要检测的文件最近的 .eslintrc文件作为最高优先级，然后才是父目录里的配置文件，等等。当你在这个项目中允许 ESLint 时，lib/ 下面的所有文件将使用项目根目录里的 .eslintrc 文件作为它的配置文件。当 ESLint 遍历到 test/ 目录，your-project/.eslintrc 之外，它还会用到 your-project/tests/.eslintrc。所以 your-project/tests/test.js 是基于它的目录层次结构中的两个.eslintrc 文件的组合，并且离的最近的一个优先。通过这种方式，你可以有项目级 ESLint 设置，也有覆盖特定目录的 ESLint 设置。

同样的，如果在根目录的 package.json 文件中有一个 eslintConfig 字段，其中的配置将使用于所有子目录，但是当 tests 目录下的 .eslintrc 文件中的规则与之发生冲突时，就会覆盖它。

1
2
3
4
5
6
7
your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

如果同一目录下 .eslintrc 和 package.json 同时存在，.eslintrc 优先级高会被使用，package.json 文件将不会被使用。

注意：如果在你的主目录下有一个自定义的配置文件 (~/.eslintrc) ，如果没有其它配置文件时它才会被使用。因为个人配置将适用于用户目录下的所有目录和文件，包括第三方的代码，当 ESLint 运行时可能会导致问题。

建立测试项目

今天来好好学学ESLint的配置文件及其信息。

老样子，先建立项目：

1
2
3
4
$ mkdir lesson05
$ cd lesson05
$ yarn init -y&&yarn add -D eslint  
$ npx eslint --init

然后项目树状图如下👇

1
2
3
4
5
6
7
8
9
10
11
12
.
│  .eslintrc.json
└─src
    │  main.js
    │  
    ├─lib
    │      .eslintrc.json
    │      lib.util.js
    │      
    └─test
            .eslintrc.json
            test.util.js

main.js文件、lib.util.js文件和test.util.js文件都使用了console.log语句，但是本项目中的三个eslint配置文件分别对no-console启用了不同的规则：

  • .eslintrc.json： “no-console”: “error”
  • src\lib.eslintrc.json： “no-console”: “warn”
  • src\test.eslintrc.json：”no-console”: “off”

执行命令npx eslint ./src，结果如下👇

三个文件都使用了console语句，但是只有一个error，一个warning。正式因为这种eslint的层叠配置起了作用。