24 - ESLint - Lint JavaScript 程序码

使用程序语言实作功能时，一百个人写就会有一百种不同的程序码，虽然都可以正常运作，但有些写法（例如全域变数）会使系统结构脆弱，容易造成错误。

为了避免这些错误，开发团队会在开发的过程中导入 Code Review 以减少问题的产生，但是对於程序码量庞大的大型专案来说， Code Review 所花费的时间巨大，间接影响了开发的进度，使得有些团队为了赶时间而牺牲了 Code Review 的时间，这使得程序码的品质日益衰退，最後无可挽回。

让 JavaScript 代码更漂亮 - ESLint

ESLint 会依照使用者配置的设定静态分析 JavaScript 程序码，并将可能的问题输出让使用者可以予以修正。

为了减少 Code Review 的时间， ESLint 使用静态分析程序码，将可能的问题抓出，可以自动修复的就覆写，不能的就输出讯息提示开发者，开发者可以依照提示做对应的讨论及修改。

ESLint 除了本身的规范外，它可以用插件的方式扩充功能，使它辨识客制的规范，也可以将其扩充至不同的语言（例如： TypeScript 、 Vue ）。

撇开商业逻辑的错误，程序码中关於语意及语法的问题大部分都是可以被 ESLint 获取的，因此使用此类工具可以减少大量的 Code Review 时间，让团队可以针对商务逻辑做讨论。

安装 ESLint

ESLint 为 npm 套件，因此要使用 npm 安装：

npm install eslint --save-dev

ESLint 也可以装於 global ，但是为了与各个 plugins 与配置版本匹配，建议安装於 local 。

使用 ESLint

安装完成後，可以初始化 ESLint ：

> npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-config-airbnb-base@latest, eslint@^5.16.0 || ^6.8.0 || ^7.2.0, eslint-plugin-import@^2.22.1

added 75 packages, and audited 191 packages in 4s

43 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.js file in /Users/PeterChen/Documents/code/build-a-super-comfortable-web-dev-env/days/05-eslint/examples/example-eslint

ESLint 的初始程序会采问答的方式取得使用者期望的配置方式，然後将相关套件安装并产生对应的配置档 .eslint.{js,yml,json} （配置档格式依照选择产生）供使用者使用。

初始完成後，我们使用下面的程序测试 ESLint ：

var foo = 'foo';

console.log(foo);

执行 ESLint ：

> npx eslint samples/sample.js

/Users/PeterChen/Documents/code/build-a-super-comfortable-web-dev-env/days/05-eslint/examples/example-eslint/samples/sample.js
  1:1  error    Unexpected var, use let or const instead  no-var
  3:1  warning  Unexpected console statement              no-console

✖ 2 problems (1 error, 1 warning)
  1 error and 0 warnings potentially fixable with the `--fix` option.

ESLint 会输出程序码的优化讯息提示开发者改进写法，另外 ESLint 也提供了自动修正的指令：

npx eslint samples/sample.js --fix

这个指令会将可以自动修复的问题覆写至原档中。

想要客制化规则时需要在配置档中的 rules 属性做设定，例如我们想要将上例的规则做调整：

module.exports = {
  // ...
  rules: {
    'no-var': 'warn',
    quotes: ['error', 'double'],
  },
};

• no-var ：层级调整为 warn
• quotes ：层级调整为 error ，并改为双引号（ double ）

依照规则的调整， ESLint 检查的规则也会随之变化：

> npx eslint samples/sample.js

/Users/PeterChen/Documents/code/build-a-super-comfortable-web-dev-env/days/05-eslint/examples/example-eslint/samples/sample.js
  1:1   warning  Unexpected var, use let or const instead  no-var
  1:11  error    Strings must use doublequote              quotes
  3:1   warning  Unexpected console statement              no-console

✖ 3 problems (1 error, 2 warnings)
  1 error and 1 warning potentially fixable with the `--fix` option.

规则的设定

ESLint 对於规则的设定有两种方式，字串及阵列。

字串的设定是改变规则的层级：

module.exports = {
  // ...
  rules: {
    'no-var': 'warn',
  },
};

层级分为：

• off 或 0 ：关闭此规则
• warn 或 1 ：将此规则设为警告层级
• error 或 2 ：将此规则设为错误层级

当设定为阵列时，可以设定两个元素 [层级, 选项] ：

module.exports = {
  // ...
  rules: {
    quotes: ['error', 'double'],
  },
};

• 第一个元素为层级设定，与字串设定方式相同
• 第二个元素为选项设定，依照各个 rule 的设定方式配置，以 quotes 为例，可以设定字串值 double 、 single 与 backtick 来决定引号

规则

ESLint 提供许多的规则，如果要使用者自己一个个规则做设定会十分麻烦，因此 ESLint 设计了预配置的规则包，让各家规范可以将其设定的规则放於 npm 套件上供使用者下载，以 airbnb 规范为例，它提供名为 eslint-config-airbnb-base 的套件，在 ESLint 的配置档中就可以用 extends 引入此规则包：

module.exports = {
  extends: ['airbnb-base'],
};

这样一来 airbnb 的相关规范都会被 ESLint 识别并运行，使用者依然可以使用 rules 修改预设的规则。

与 VS Code 整合

首先，安装 ESLint 插件：

code --install-extension dbaeumer.vscode-eslint

如此一来， ESLint 插件会使用设定档 .eslintrc.js 的配置，在编辑器上显示各种提示。

接着我们要调整配置，使得档案在储存时执行 ESLint 修复档案内容：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

将设定存於专案中

为了让每次新开此专案的使用者都可以使用到 ESLint ，我们可以将设定配置在 .vscode 目录中。

首先，我们需要纪录要安装的插件，在 .vscode/extensions.json 中：

{
  "recommendations": ["dbaeumer.vscode-eslint"]
}

另外相关的设定也可以在 .vscode/settings.json 中纪录：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样一来，开启此专案的新使用者就可以使用插件推荐清单安装 ESLint ，并将相关的配置做设定。

本文重点整理

• 在开发时，为了确保程序码的质量而需要引入 Code Review 来检讨与优化程序码，以避免发生错误，而在语言的写法方面，大部分的问题都是不断重复却很容易识别的，这使得 Code Review 的时间会浪费在这些问题上。
• ESLint 作为规范 JavaScript 语言写法的规范工具，提供自动化的静态扫描，以检查出各种语法相关的问题以及进行修正，大量地节省时间与问题发生的频率，对於开发来说是不可或缺的工具。
• 使用初始化的指令，可以依照问答完成 ESLint 的配置档设定。
• 依据专案的需求，可以自己配置设定以符合专案的运作。
• 使用 VS Code 的 ESLint 插件，可以在储存时启动 ESLint 对 JavaScript 做 lint。

参考资料

• ESLint: Getting Started with ESLint
• ESLint: Configuration Files
• ESLint: Rules