01
前言
在前端项目中我们可以使用 editorconfig 以及 prettier 来约束项目的代码风格，但是这两个工具对于语法方面的约束就无能为力了。因此即使使用了这两个工具，对于一些语法方面的问题还是需要 ESLint 这样专业的工具来处理。
01
开始使用
安装
使用npm将ESLint安装到项目当中：
$ npm install eslint --save-dev
运行ESLint的init命令:
$ npx eslint --init
根据命令行的提示就可以创建一份ESLint的配置文件：
{ "env": { "browser": true, "es2020": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2020, "sourceType": "module" }, "plugins": [ "react", "@typescript-eslint" ], "rules": { }}
01
配置
parser
ESLint 通过 AST 来分析代码，而将代码转化为 AST 的就是 parser。ESLint 默认使用 Espree 作为其解析器，同时支持其他解析器(Esprima、Babel-ESlint等)，一般情况下使用默认的即可，但是如果要让 ESLint 支持检查 typescript 代码，就需要用到 @typescript-eslint/parser 这个解析器将 typescript 转换成与 estree 兼容的格式方可使用。
parserOptions
通过名称可以大概猜到这是解析器的选项，该选项允许用户指定想要支持的 JavaScript 选项，换句话讲，该选项可以让用户决定支持哪一些 JavaScript 的语法。parserOptions 支持下面几种属性
·
| 1 | 【ecmaVersion】：ECMAScript 版本，默认为5，可以使用数字或年份来指定想要使用的版本。注：这里指定了版本后仅表示支持相应的语法，对应版本新增的全局变量和类型(如Promise、Set等)需要在 env 选项中额外指定。 |
| 2 | 【souceType】： script(默认) module，代码为 esmodule 时需要使用该选项 · ecmaFeatures：需要额外支持的语言特性列表。例如想要支持 jsx 可以这样配置： |
| 3 | 【note】： 使用第三方解析器时 parserOptions 一样会传递给解析器，但是是否使用这些属性则取决于解析器。 |
env
JavaScript 的代码有可能运行在浏览器或者 node 中，也会引入不同的类库辅助开发。不同的环境可能带来不同的全局变量，而 ESLint 默认是没有全局变量的，如果在同时启用了 no_undef 规则(禁止使用未定义变量)的情况使用这些全局变量会直接报错。
这时候就需要在 env 中指定运行的环境，这些环境其实就是一组预定义的全局变量，让 ESLint 知道当前环境存在这些全局变量。例如项目要运行在浏览器中，使用 ES2020 编写并使用 Jest 测试，则可以这样配置 env：
"env": { "browser": true,"es2020": true,"jest": true},
rule
rule 规定了代码编写的方式，例如要求代码中不能使用未定义的变量以及行尾必须添加分号可以添加下面的 rule：
"rules": {"no-undef": "error","semi": "error"}
每一个 rule 的值可以为下面值之一：
· "off" 或 0，表示关闭规则
· "warn" 或 1，开启规则，使用警告级别
· "error" 或 2，开启规则，使用错误级别
如果一个 rule 有额外的参数，则通过数组传值，例如使用双引号：
"quotes": ["error", "double"]
所有的 rule 规则可以查看这里
plugins
如果 ESLint 提供的规则不能满足项目的需求时，可以通过 plugin 获取到额外的 rule，例如 eslint-plugin-react 添加了一些 react 相关的校验 。
rule：
要使用 plugin 只需要在 plugins 字段添加对应的包名即可：
"plugins": ["eslint-plugin-react",]
plugin 名称可以使用缩写，具体缩写规则为
· eslint-plugin-name -> name
· @foo/eslint-plugin -> @foo
· @foo/eslint-plugin-name -> @foo/name
plugin 只会添加额外的 rule 以供使用，因此要配置这些 rule 还需要在 rules 字段中手动添加，这里要注意不能直接使用 plugin 新增的 rule 的名称，而是需要以缩写包名/rule 命名
"rules": {"react/display-name": "error", // eslint-plugin-react 下的 display-name 规则 "@typescript/camelcase": "off", // @typescript/eslint-plugin 下的 camelcase 规则}
extends
从上面可以看到一条条的配置 rule 非常麻烦，ESLint 贴心的为我们提供了快速使用别人的配置的方式 extends，该字段支持我们直接使用别人定义好的配置。例如要使用 ESlint 推荐的配置，可以这样配置：
"extends": ["eslint:recommended",],
这样我们相当于使用了一份 ESLint 推荐的配置，对于其中不符合具体项目开发的 rule 在 rules 中重新定义即可。ESLint 默认提供 recomanded 和 all 两份配置，具体的配置内容看这里。除了 ESlint 官方提供的配置，一般 plugin 也会提供相应的配置方便开发者使用，例如 eslint-plugin-react 的配置为：
要使用这个配置可以这样使用：
"extends": ["eslint:recommended", "plugin:react/recommended", // 这里会先继承 eslint:recommended 的配置],
globals
项目中可能会有一些特有的全局变量，这时候就需要在 globals 中定义这些变量避免被识别成未定义变量。要声明一个全局变量需要添加这样的配置：
"globals": {"var1": "writable", // 变量可读写"var2": "readonly", // 变量不允许重写 "Promise": "off" // 禁用此全局变量}
总结
JavaScript 作为一个动态的弱类型语言在没有约束的情况下很容易写出糟糕的代码，埋下隐藏的 bug，而通过 ESLint 可以规范我们写代码的方式，在编写代码的时候就可以发现问题并发出警告，从而减少了问题出现的可能性。
ESlint 官方文档