解读 .eslintrc.js 文件

595 阅读3分钟

ESLint核心配置项:

1. parser - 解析器

ESLint底层默认使用ESpree来进行ast解析,espree是基于acorn实现的,虽然acorn解析的ast能解析绝大多数ECMAscript语法,

但是acorn不能解析ts代码,所以espree也不能解析,因此要引入其他解析器。

社区提供的解决方案是 @typescript-eslint/parser,

这个解析器能将ts代码转换为ESpree能识别的格式(即EStree格式),然后在ESLint下进行格式检查,以此兼容了typescript语法。

2. parserOptions - 解析器选项

  • ecmaVersion: 这个配置和 Acron 的 ecmaVersion 是兼容的,可以配置 ES + 数字(如 ES6)或者ES + 年份(如 ES2015),也可以直接配置为latest,启用最新的 ES 语法。
  • sourceType: 默认为script,如果使用 ES Module 则应设置为module
  • ecmaFeatures: 为一个对象,表示想使用的额外语言特性,如开启 jsx。

3. rules - 具体代码规则

在rules对象里,key一般为规则名,value为具体的配置内容。

如果value配置为数组,第一个元素为规则的ID,

off - 0 关闭规则

warn - 1 开启规则,违背规则抛出warning,程序不会退出

error - 2 开启规则,违背后抛出error,程序退出

(具体的规则配置可能会一样,有的是一个字符串,有的可以配置一个对象,具体参考 cn.eslint.org/docs/rules/

4. plugins

ESLint本身没有内置ts的代码规则,需要添加 @typescript-eslint/eslint-plugin 来扩展一些关于TS代码的规则。

// .eslintrc.js

module.exports = {

// 添加 TS 规则,可省略`eslint-plugin`

plugins: ['@typescript-eslint']

}

添加插件后只是扩展了ESLint本身的规则集,但ESLint默认并没有开启这些规则的校验。

要开启或者调整规则的校验,需要在rules里面配置。


// .eslintrc.js

module.exports = {

    // 开启一些 TS 规则

    rules: {

        '@typescript-eslint/ban-ts-comment': 'error',

        '@typescript-eslint/no-explicit-any': 'warn',

    }

}

5. extends - 继承配置

继承另一份ESLint配置,可以是字符串可以是字符串数组

3种继承方式:1.从ESLint本身继承 2.从类似 eslint-config-xxx 的 npm 包继承 3.从 ESLint 插件继承。


// .eslintrc.js

module.exports = {

    "extends": [

        // 第1种情况

        "eslint:recommended",

        // 第2种情况,一般配置的时候可以省略 `eslint-config`

        "standard"

        // 第3种情况,可以省略包名中的 `eslint-plugin`

        // 格式一般为: `plugin:${pluginName}/${configName}`

        "plugin:react/recommended"

        "plugin:@typescript-eslint/recommended",

    ]
}

有了 extends 的配置,对于之前所说的 ESLint 插件中的繁多配置,我们就不需要手动在rules里一一开启了,

通过 extends 字段即可自动开启继承插件中的规则。

extends: ["plugin:@typescript-eslint/recommended"]

6. env 和 globals

env 是可以配置根据环境不同来判断是否开启


// .eslint.js

module.export = {

    "env": {

        "browser": "true",

        "node": "true"

    }

}

globals是可以配置某个全局变量是否可以被修改

配置值可以3种:

"writable"或者 true,表示变量可重写;

"readonly"或者false,表示变量不可重写;

"off",表示禁用该全局变量。

jQuery为例 ,


// .eslintrc.js

module.exports = {

    "globals": {

        // 不可重写

        "$": false,

        "jQuery": false

    }

}