从零构建前端 Lint 工作流（2020手把手版）

选择性阅读
新手建议从头开始，都是手把手，按步骤配置一遍
想集成 VSCode 插件，自动提示/修复错误–>VSCode 集成 ESLint 检查
什么是代码检查
代码检查主要是用来发现代码错误、统一代码风格。
在 JavaScript 项目中，我们一般使用 ESLint 来进行代码检查，它通过插件化的特性极大的丰富了适用范围，搭配 typescript-eslint 之后，甚至可以用来检查 TypeScript 代码。
配置 ESLint
小试牛刀
新建一个文件夹，打开命令行， npm init -y 创建 package.json
安装依赖 npm install --save-dev eslint babel-eslint eslint-config-alloy
在项目根目录下创建一个 .eslintrc.js 或 .eslintrc.json 的配置文件：
// .eslintrc.js
module.exports = {
extends: [
‘alloy’,
],
};
在项目根目录下创建一个 index.js ，复制下面内容：
var myName = ‘Tom’;
console.log(My name is ${myNane});
在命令行输入 npx eslint index.js
// eslint 报错信息：
✖ 2 problems (2 errors, 0 warnings)
error Unexpected var, use let or const instead no-var
error ‘myNane’ is not defined no-undef
使用 npx eslint index.js --fix 自动修复某些规则
// 这时 var 变成了 let
// 还剩下一个无法自动修复的错误
✖ 1 problem (1 error, 0 warnings)
error ‘myNane’ is not defined no-undef
配合 TypeScript
由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 @typescript-eslint/parser，替代掉默认的解析器，别忘了同时安装 typescript：
npm install --save-dev typescript @typescript-eslint/parser
接下来需要安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。
npm install --save-dev @typescript-eslint/eslint-plugin
修改配置文件
module.exports = {
extends: [
‘alloy’,
],
parser: ‘@typescript-eslint/parser’,
plugins: [’@typescript-eslint’],
rules: {
// 禁止使用 var
‘no-var’: “error”,
// 优先使用 interface 而不是 type
‘@typescript-eslint/consistent-type-definitions’: [
“error”,
“interface”
]
}
}
以上配置中，我们自定义了两个规则，其中 no-var 是 ESLint 原生的规则（我们刚刚已经用到了这个规则，它被包含在 alloy 中，此处会覆盖），@typescript-eslint/consistent-type-definitions 是 @typescript-eslint/eslint-plugin 新增的规则
规则的取值一般是一个数组（上例中的 @typescript-eslint/consistent-type-definitions），其中第一项是 off、warn 或 error 中的一个，