10.3 ESLint

ESLint 是一个流行的代码检查工具，它提供了一个配置文件允许我们自定义代码规范，并依据该规范检查源代码。如果大家的编码不符合规范，程序就会警告甚至报错，用这种工具来倒逼团队成员遵守统一的代码风格。

ESLint 有两种能力：

• 检查代码质量：比如是否有已定义但未使用的变量。
• 检查代码风格：换行，引号，缩进等相关的格式规范。

在脚手架生成的项目中，一般都默认启动 ESLint，并会在项目运行或热更新时自动执行检测。当然如果你的项目中没有集成 ESLint，我们也可以从零开始接入，下面介绍接入方法。

10.3.1 安装与初始化

首先在项目根目录下安装 ESLint：

$ yarn add -D eslint

安装之后会在项目中生成一个 “eslint” 命令，该命令可以执行 ESLint 提供的所有能力。使用 ESLint 的第一步是在项目中进行初始化：

$ npx eslint --init

初始化命令是一个交互式命令。执行后首先会提示选择如何使用 ESLint，三个可选功能选项如下：

• To check syntax only：仅仅检查语法。
• To check syntax and find problems：检查语法和发现问题。
• To check syntax, find problems, and enforce code style：检查语法、发现问题、强制格式化。

我们选择第二个：检查语法和发现问题。因为强制格式化会使用另一个工具实现，因此不选第三个选项。

接着还会弹出几个定制化的问题，我们只选择基本配置（框架和 TS 下一步再配置），最终的选项如下：

• 使用哪种模块机制？ESM(import/export)。
• 使用哪个框架？None。
• 使用 TypeScript？No。
• 在哪里使用？浏览器（browser）。
• 需要哪种格式的配置文件？JSON。

选择完这些选项后，ESLint 会自动列出需要安装的包，输入 yes 即可安装，同时会按照所选格式生成配置文件 “.eslintrc.json”，此时的安装和初始化工作就完成了。

项目中定义的所有代码规范都会写在这个配置文件中，ESLint 依据该配置文件执行检查。

10.3.2 配置文件解析

配置文件中可以自定义规范，或者加载插件使用已有的规范，我们先来认识一下配置文件。

1. 基本配置

初始化后生成 .eslintrc.json 文件的配置如下：

{
  "env": {
    "browser": true,
    "es2021": true,
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
  },
  "rules": {},
};

这个基本配置包含了一套默认推荐的规则，定义在 “eslint:recommended” 这个扩展中。parserOptions 选项表示如何解析代码，有两个可选属性：

• ecmaVersion：ECMAScript 版本，“latest” 表示最新版。
• sourceType：模块化机制，“module” 表示 ESM。

2. Vue 配置

Vue 在默认配置的基础上，也有一套推荐的语法配置，定义在 “plugin:vue/vue3-essential” 这个插件中。我们使用的前端框架是 Vue，因此要使用该插件，在基本配置上添加配置项如下（下面用 + 号标记的配置）：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
+   "vue/vue3-essential"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
  },
+ "plugins": [
+   "vue"
+ ],
  "rules": {
  }
};

现在，ESLint 可以自动检测 .vue 单文件组件中的代码规范了。

3. TypeScript 配置

如果要支持 TypeScript，还需要在上一步配置的基础上增加 TypeScript 相关的扩展和插件（下面用 + 号标志的配置），完整的配置项如下：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
+   "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
  },
+ "parser": "@typescript-eslint/parser",
  "plugins": [
    "vue",
+   "@typescript-eslint"
  ],
  "rules": {
  }
};

这样一个通用的 Vue3 + TypeScript 的代码规范已经配置好了。接下来我们试着使用命令检查代码。

10.3.3 代码检查

定义好配置文件之后，我们现在来写一段代码，并执行规范检查。

新建 index.js 文件，写入如下内容：

const a = "13";
function add() {
  return "1";
}

从 JavaScript 的角度来看，这两行代码是没问题的。然后我们运行检查命令：

$ npx eslint index.js

这时会在控制台看到报错：

2:7 error 'a' is assigned a value but never used no-unused-vars
4:10 error 'add' is defined but never used no-unused-vars

2 problems (2 errors, 0 warnings)

上面错误的意思是变量 a 和函数 add 已声明但未使用，说明代码不符合约定的规范。从错误信息可以看出，规范验证不通过是因为不满足 “no-unused-vars” 这条规则，该规则不允许未使用的变量存在。

该条规则是 “eslint:recommended” 扩展中默认开启的规则之一，如果我们确实不需要，那么可以通过自定义规范的方式关闭验证。

10.3.4 自定义规范

在配置文件 .eslintrc.json 的扩展中已经启用了许多默认的规范。如果我们要自定义规范，可以将多条规则定义在 rules 对象下，此时会覆盖默认的规则。

比如要去除上面的报错，就是禁用 “no-unused-vars” 这条规则，配置方法如下：

{
  "rules": {
    "no-unused-vars": ["off", {"vars": "all"}]
  }
}

可以看到规则配置的值是一个数组，包含两个数组项。数组第一项表示错误级别，是以下 3 个值之一：

• "off" 或 0：关闭规范验证。
• "warn" 或 1：警告级别验证。
• "error" 或 2：错误级别验证。

数组第二项才是真正的规范配置，当规范验证未关闭（错误级别不等于 off 或 0）时生效，并会根据错误级别提示错误信息。具体完整的规范请参考规则文档（http://eslint.cn/docs/rules），如图所示：

上面网页中看到所有支持的规则列表，前面打对钩的规则表示已在 “eslint:recommended” 扩展中开启。我们可以在这里找到任意支持的规则，将其写在 rules 对象下实现自定义。