ESLint配置参数

发表于 2020-05-31 分类于工具

前言

要将代码规范落实不仅是靠个人自觉的遵守，还得需要一个工具可以进行强制性地检测校验，这样就能真正地将规范落实到实处。而ESLint就是用来检测JS(X)/TS(X)代码的不二选择。

常用参数

extends

用来继承已有的ESLint配置，这个配置可以是内置的，也可以是npm插件；其值的格式有字符串和字符串数组两种；

字符串

当只是一个字符串时，这个字符串可以是：

配置文件路径；
共享配置名称（即npm插件）；当npm插件名称为eslint-config-*格式时，可以省略前面的eslint-config-前缀，如：eslint-config-airbnb可以直接写成airbnb；
ESLint内置集成的配置；如：eslint:recommended，eslint:all；

字符串数组

数组形式，每个字符串都可以是上述格式；但是数组中后面的配置会覆盖前面的配置（当出现相同规则时）；如：

{
    extends: [
        'plugin:vue/strongly-recommended',
        '@vue/standard',
        '@vue/typescript/recommended' // ts检测
    ]
}

env

env参数可以设置代码环境，启用一个环境，eslint就能够自动识别对应环境所有的全局变量；常用的环境有：

browser：浏览器环境；
node：Node.js环境；
shared-node-browser：浏览器和Node.js通用的全局变量；
es6：启用除了modules以外的所有ECMAScript 6特性；
jquery：jQuery相关全局变量；
worker：Web Worker环境；

除了上述的环境，eslint还支持很多比较常用的库作为环境（支持其全局变量），详情可以参考官方文档；

env的设置方式很简单，其值为一个对象，当需要开启某个环境时，只需要将对应环境的值设置为true即可：

{
    env: {
        node: true
    }
}

parserOptions

parserOptions是用来设置要支持检测的ES语法版本的；其设置值也是一个对象，包含三个选项（键）：

ecmaVersion：用来设置支持的ECMAScript语言版本；可以是3，5，6这种经典版本号，也可以是用年份来设置版本号，如：2015（同6），2020（同11）；ES6及其之后的版本就可以使用对应的年份来设置版本号。默认值是5。
sourceType：具体作用细节还不清楚，网上找不到详细的资料；目前有两个选项，一个是script（脚本模式，默认值），另一个是module（ES模块）；
ecmaFeatures：用于设置一些额外的语言特性，比如JSX等等；

ecmaFeatures

目前支持的额外语言特性有4个：

jsx：JSX语法；
impliedStrict：全局strict模式；
globalReturn：全局作用域使用return语句；
experimentalObjectRestSpread：实验性功能，对象属性展开及剩余操作（目前该特性已经为stage-4了，ES2018）；

该属性设置方式同env一样，设置为true则开启，反之false则关闭；

{
    parserOptions: {
        ecmaVersion: 2020,
        ecmaFeatures: {
            jsx: false // 关闭对jsx的支持
        }
    }
}

parser

设置ESLint的解析器，解析器用来解析代码的语法树；其默认解析器为Espree，但是还有其他可以兼容的解析器（需要单独安装相应的npm包）：

esprima
babel-eslint：对babel的封装；
@typescript-eslint/parser：支持对TS文件的解析；

好像也可以直接在parserOptions里面设置parser：

{
    parserOptions: {
        parser: '@typescript-eslint/parser'
    }
}

root

由于ESLint配置默认遵循层叠原则，即每级目录可以单独配置.eslintrc.*相关文件，如果该级目录没有文件则会向上一级查找直至根目录；不过如果设置root为true之后，项目中所有的检测文件不再会遵循层叠原则，而是统一以根目录中的配置文件为准来检测代码。

1
2
3

{
    root: true
}

rules

除了继承已有的配置，还能手动修改通过rules属性来手动修改ESLint相关配置；每个检测规则都有其独特的键名，当要修改某条规则时，则使用键名然后设置相应的值即可；ESLint自带的规则表可以查看官方文档，使用其它ESLint插件则需要查看对应插件给出的规则；

每个规则都遵循一些简单的设置：

有些规则可能支持更详细的配置，比如数组，对象等等；

{
  rules: {
    'no-console': 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'generator-star-spacing': 'off',
    'no-mixed-operators': 0,
    'vue/max-attributes-per-line': [
      2,
      {
        'singleline': 5,
        'multiline': {
          'max': 1,
          'allowFirstLine': false
        }
      }
    ]
  }
}

overrides

overrides可以匹配特定的文件，然后专门为其设置相应的ESLint配置（相当于一个优先级更高的配置文件）；

files

通过这个参数可以来匹配特定的文件，其语法遵循glob匹配模式；值的形式为数组，数组中每个字符串代表一个匹配模式，如：

{
    overrides: [
        {
          files: [
            '**/__tests__/*.{j,t}s?(x)', // 匹配jsx/tsx
            '**/tests/unit/**/*.spec.{j,t}s?(x)' // 匹配单元测试脚本
          ],
          env: {
            jest: true
          }
        },
        {
          files: [
            '*.js' // 匹配所有的js文件
          ],
          rules: {
            '@typescript-eslint/no-var-requires': false // 关闭typescript-eslint对js文件检测require语句
          }
        }
    ]
}

前言