什么是ESLint
ESLint 是一个JS代码检查工具，用于发现并修正语法错误和统一代码格式。也就是说 ESLint 关注两方面的问题：
代码质量：约定JS的使用方式，避免问题的产生
代码格式：只影响代码的美观程度，不会产生问题
为什么我们需要代码检查呢？JS 作为一种弱类型动态语言，写法会比较随心所欲，这便很容易引入问题并增加我们发现问题的成本。
通过编写合适的规则来约束代码，利用代码校验工具来发现并修复问题，能让我们的代码更健壮，工程更可靠。ESLint 就是这么一个通过各种规则对我们的代码添加约束的工具。
基本使用
2.1 初始化
# 下载，安装为开发时依赖
npm install eslint --save-dev
# 初始化
npx eslint --init
init 完毕之后，在项目的根目录会生成一个 eslint 的配置文件.eslintrc.{js,yml,json} 。
2.2 配置
从一个🌰入手，详细看看 .eslintrc.{js,yml,json} 中到底有啥，这里以json格式的配置为例：
{
"env": {
"browser": true,
"es2021": true
},
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
/* 引入插件，作用类似 require，这里简写了，实际引入的是 @typescript-eslint/eslint-plugin */
"plugins": ["@typescript-eslint"],
"extends": [
/*使用eslint推荐的规则作为基础配置，可以在rules中覆盖*/
"eslint:recommended"
],
"rules": {
"quotes": ["error", "double"],
"prefer-const":"error",
/* 使用@typescript-eslint/eslint-plugin插件中的规则 */
"@typescript-eslint/consistent-type-definitions": [
"error",
"interface"
]
},
"globals": {
"$": "readonly"
}
}2.2.1 环境和全局变量
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告，可以通过定义全局变量来解决。env提供了多个环境选择字段，一个环境定义了一组预定义的全局变量。globals可以自定义单个的全局变量。
2.2.2 规则
rules字段定义需要符合的规则，官网提供了一系列的规则供选择 List of available rule。上面所示的quotes和prefer-const都是官网提供的规则选项。
规则的value设定可以通过string，直接设置错误等级，等级分为三类："off" 、"warn"、"error"；也可以通过数组的方式设置，在数组方式的设置中，第一项是错误等级，剩余项为可选参数，官网提供的每条rule都有详细的说明文档 ，向我们展示了该条 rule 的使用方式，包括 .eslintrc.{js,yml,json} 中的配置和内联配置方式，还有使用建议。
2.2.3 解析器
parserOptionsESLint 允许指定想要支持的 JavaScript 语言选项，默认支持 ECMAScript 5 语法。可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
由于 ESLint 默认的解析器 ESPree 只支持已经形成标准的语法特性，对于处于实验阶段以及非标准的语法，如 TypeScript ，是无法正确解析的，这时就需要使用其他的解析器，生成和 ESTree 结构相兼容的 AST 。
对于 TypeScript 就需要使用"parser": "``@typescript-eslint/parser``" 。
2.2.4 插件
官方提供的规则毕竟有限，当我们想自定义规则的时候，就需要自定义一个 ESLint 的插件，然后将规则写到自定义的 ESLint 插件中，在配置文件中通过plugins字段引入 。
还是以处理TS为例，光指定解析器 @typescript-eslint/parser 只是能把 ESLint 不能识别的语法特性转化为 ESLint 能识别的，但它本身不包括规则，还需要设置 "plugins": ["@typescript-eslint/eslint-plugin"], 插件，这个声明只是完成了插件的加载，还需要在rules中使用需要的规则，才能执行对应的代码检测规则。
当然，plugin不仅限于引入新的规则，其他的配置也是一样可以通过plugin引入的。
{
// ...
"plugins": [
"jquery", // eslint-plugin-jquery
"@foo/foo", // @foo/eslint-plugin-foo
"@bar" // @bar/eslint-plugin
],
"rules": {
"jquery/a-rule": "error",
"@foo/foo/some-rule": "error",
"@bar/another-rule": "error"
},
"env": {
"jquery/jquery": true,
"@foo/foo/env-foo": true,
"@bar/env-bar": true,
}
// ...
}更多引入和使用方式参考官网 configuring-plugins。
2.2.5 扩展
手动配置的工作量很大，所以一般会使用extends扩展包来预设配置，extends可以去集成各样流行的最佳实践，成本低到令人感动。
配置文件一旦被扩展，将继承另一份配置文件的所有属性，包括规则、插件、语言解析选项 Extending Configuration Files。
搭配使用
3.1 VSCode
通常我们在开发中，不会频繁使用npx eslint命令执行代码检查，而是在IDE中自动提醒Eslint的错误。在VSCode中，需要安装ESLint插件。
设置一下 settings.json 的保存自动格式化设置：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,小结
本文介绍了ESLint的基本配置，以及在VSCode中的应用，希望你能利用好ESLint在团队协作中更好的发挥作用。
❤️ 谢谢支持
以上便是本次分享的全部内容，希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
往期精彩
2320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
