晚上写代码，vscode 插件 Beautify 和 Prettier 突然大姨妈，把 jsx 代码格式化的乱七八糟，同时我也发现了ESLint 插件也不起作用了，解决好格式化插件的同时决定踩踩 ESLint 的坑。

vscode ESLint 插件依赖于安装的 ESLint library，并且会优先在当前目录中查找，没找到则会在全局目录下查找，如果都没找到，那这个插件可就是一个铁憨憨不起作用了！ESLint 库有了，配置文件当然不能少，ESLint 支持使用 JavaScript、JSON 和 YAML 为目录指定配置信息。

执行 eslint --init 命令可以在当前目录创建 .eslintrc 文件（注意：当前目录需要有 package.json，因为可能在创建配置文件时，需要安装额外的插件），因为经常使用 react，所以还需要安装 eslint-plugin-react 插件，使用命令创建的带有 eslint-plugin-react 插件的配置文件有坑，在对 jsx 文件校验时存在错误判断，查看插件的 github 仓库后发现，用 ESLint 命令创建的配置文件缺少了 rules 字段，即，如果要对 react 应用进行校验，需要配置如下 extends 字段：

1
2
3
4
5
6
{
	"extends": [
   "eslint:recommended",
   "plugin:react/recommended"
 ]
}

或者进行如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
	"extends": ["eslint:recommended"],
  "plugins": ["react"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }
}

完全的配置文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

接下来是对各字段的解释说明：

  • env：脚本的运行环境，每种环境都有一组特定的预定义全局变量

  • globals：脚本在执行期间访问的额外的全局变量

  • rules：启用的规则

    "semi" 和 "quotes" 是 ESLint 中 规则 的名称，第一个值是错误级别：

    • "off" or 0 - 关闭规则
    • "warn" or 1 - 将规则视为一个警告
    • "error" or 2 - 将规则视为一个错误

  • extends：扩展的 ESLint 配置

    eslint:recommended 为 ESLint 默认开启的规则，所有在 规则页面 被标记为✔️的规则将会默认开启，同时也可以在 npm 仓库搜索 eslint-config 使用别人的配置

如果不想使用 ESLint 默认的解析器 Espree，也可以在配置中指定解析器，最常用的如 babel-eslint，

使用 typescript

  1. 安装 eslint、typescript、@typescript-eslint/parser、eslint-plugin-typescript

    npm install eslint typescript @typescript-eslint/parser eslint-plugin-typescript –save-dev

  • 由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 @typescript-eslint/parser，替换掉默认的解析器，注：typescript-eslint-parser 已不再维护，安装 npm 包时别装错了
  • 由于 typescript-eslint-parser 对一部分 ESLint 规则支持性不好，故我们需要安装 eslint-plugin-typescript，弥补一些支持性不好的规则

  1. 创建 eslint 配置文件 .eslintrc，上文也提到过，ESLint 支持使用 JavaScript、JSON 和 YAML 为目录指定配置信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
      "parser": "@typescript-eslint/parser",
      "plugins": ["typescript"],
      "extends": ["eslint:recommended"],
      "rules": {
        "semi": ["error", "always"], // 每条语句后必须加分号
        "quotes": ["error", "double"], // 必须使用双引号
        // @fixable 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        "eqeqeq": [
          "error",
          "always",
          {
            "null": "ignore"
          }
        ],
        // 类和接口的命名必须遵守帕斯卡命名法，比如 PersianCat
        "typescript/class-name-casing": "error"
      }
    }

  2. 测试：创建不符合规则的代码，运行命令查看效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    interface person {
        name: string;
        age: number;
    }

    let tom: person = {
        name: 'Tom',
        age: 25
    };

    if (tom.age == 25) {
        console.log(tom.name + 'is 25 years old.');
    }

    eslint-1

    或者在 package.json 中添加一个 script，来简化这个步骤：

    1
    2
    3
    "scripts": {
        "eslint": "eslint index.ts"
      },

    这时只需执行 npm run eslint 即可。

  3. 在 VScode 中继承 Eslint 的检查：下载安装 ESLint 插件

    VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的，需要在「文件 => 首选项 => 设置」中，添加以下配置：

    1
    2
    3
    {
    	"eslint.validate": ["javascript", "javascriptreact", "typescript"]
    }

    这时再打开一个 .ts 文件，将鼠标移到红色提示处，即可看到报错信息

  4. 如果需要支持对 jsx 和 tsx 文件的支持，则还需安装 eslint-plugin-react 插件，并在 VSCode 插件中添加对 typescriptreact 的检查。