语言►nodejs►库►eslint

ESLint的配置文件

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/09/26/ESLint%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/

摘要

本文主要讲述了：

  1. 配置文件格式
  2. package.json
  3. 配置文件格式优先级
  4. 配置文件查询
  5. 全局配置文件
  6. 层叠配置优先级
  7. 配置

正文

配置文件格式

ESLint 的配置文件可以用 3 种文件格式编写：

  1. JavaScript .eslintrc.js
  2. JSON .eslintrc.json
  3. YAML .eslintrc.yaml或.eslintrc.yml

package.json

除此之外，配置还可以写在package.json的eslintConfig字段里。

当存在独立配置文件时，package.json中的配置将被忽略。

配置文件格式优先级

当同一个目录下有多个不同格式的配置文件时，ESLint 只会使用一个。ESLint 会按照以下优先级（从高到低）读取：

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc 已废弃，不推荐使用
  6. package.json

配置文件查询

默认情况下，ESLint 会从文件所在目录开始并逐级向上寻找配置文件。

直到某个配置文件的root属性为true或已经到达根目录时，才会停止。

全局配置文件

开发者还可以创建配置文件并将其置于$HOME。当 ESLint 无法找到配置文件时，该配置文件将生效。否则，该配置文件将被忽略。

层叠配置优先级

当上级目录也存在配置文件且 CWD 的配置文件的root属性不为true时，ESLint 会对多个配置文件进行层叠。

和被打开文件距离越短的配置文件的优先级越高，当多个配置文件冲突时，以优先级高的为准。

注意：通过命令行手动指定的配置文件优先级最高。

配置

root

若root为true，则 ESLint 不应该继续向上查询配置文件。

1
root: true

rules

rules表示语法规则。

示例：

1
2
rules:
  no-undef: warn
1
2
rules:
  no-undef: error

上面的配置中：

  • no-undef表示禁止未经定义就使用变量
  • warn表示一旦违反了对应的规则，ESLint 就警告
  • error表示一旦违反了对应的规则，ESLint 就报错

globals

有些变量是 JavaScript 运行时提供且直接能使用的，例如：Math、Number、console等。

如果将no-undef规则设置为error，因为这些变量未经开发者定义就使用，ESLint 就会报错。

因此必须告诉 ESLint，哪些变量可以不经定义就使用。

示例：

1
2
3
4
globals:
  Math: readonly
  Number: readonly
  console: readonly
  • readonly表示该全局变量是只读的，不允许写入。
  • writable表示该全局变量允许读写。

注意：

  1. readonly和writable必须在启用no-global-assign规则之后才会生效
  2. eslint:recommended默认启用了no-global-assign

env

一个个手动定义globals太麻烦，于是env出现了。

env定义了一组预定义的全局变量。可用的env值包括但不限于：

  • browser 浏览器中的全局变量，例如：Math、Number、console
  • node nodejs 全局变量，例如：require()
  • commonjs CommonJS 全局变量（用于使用 browserify 或 webpack 打包的遵循 CommonJS 规格的只在浏览器中运行的 JavaScript 代码）
  • shared-node-browser nodejs 和浏览器中共有的全局变量，例如：Math、Number、console
  • es6 启用 ES6 中除了模块之外的所有特性（如果此特性被启用，则parserOptions中的ecmaVersion的值会被自动设置为6)，注意：不包括 ES2016+的新特性。
  • amd AMD 中的全局变量，例如：require()和define()
  • jquery jQuery 中的全局变量，例如：$和jQuery
  • webextensions WebExtensions 中的全局变量

env的值不是互斥的，可以同时使用多个。

示例：

1
2
3
env:
  browser: true
  jquery: true

parser

默认情况下，ESLint 使用espree作为语法解析器。

示例：

1
parser: espree

注意：当parser的值为null时，语法解析器也为espree。

parserOptions

parserOptions表示解析器配置。

ecmaVersion

ecmaVersion表示语法版本。

ecmaVersion的取值：

  1. 3
  2. 5
  3. 6或2015
  4. 2016
  5. 2017
  6. 2018
  7. 2019
  8. 2020
  9. 2021
  10. 2022

高版本包含低版本的所有内容。

注意：若不启用env中的es6特性，就算ecmaVersion为6或2015，ESLint 也不支持es6中的全局变量。

sourceType

sourceType表示脚本类型。

sourceType的取值：

  1. script 脚本（默认值）
  2. module ES6 模块

extends

extends表示继承

继承时可能发生 3 种情况：

  1. 派生类配置新增了额外的配置（当基类配置和派生类配置互相独立时）
  2. 派生类配置局部重写了基类配置
  3. 派生类配置完全重写了基类配置

注意：如果派生类配置继承了多个相互冲突的基类配置，则数组索引越大的基类配置优先级越高，但优先级最高的基类配置也没有派生类配置的优先级高

eslint:recommended表示 ESLint 推荐的一组核心规则，它会随着 ESLint 主版本的变化而变化。

示例：

1
2
extends:
  - eslint:recommended

配置文件

示例：扩展eslintconfig.yaml中的配置。

1
2
3
extends:
  - eslint:recommended
  - ./eslintconfig.yaml

可共享配置包

示例：扩展eslint-config-demo（eslint-config-可以省略）内的配置。

1
2
3
extends:
  - eslint:recommended
  - demo

插件内的配置

示例：扩展eslint-plugin-demo（eslint-plugin-可以省略）内名为recommended的配置。

1
2
3
extends:
  - eslint:recommended
  - plugin:demo/recommended

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/09/26/ESLint%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/

本文对你有帮助？请支持我

支付宝
微信