大家好，我是前端西瓜哥，今天给大家介绍一下ESLint的配置项。ESLint是一种检查JavaScript程序是否符合某些规则的工具。比如字符串用单引号还是双引号，制表符缩进用2个空格还是4个空格等等，这些都可以通过ESLint来指定。安装可以使用如下命令安装并生成ESLint默认配置npminit@eslint/config执行后有命令行交互，可以根据问题需要选择。然后您将得到一个.eslintrc.json或.eslintrc.js或.eslintrc.yaml文件（取决于您的选择）。我没有使用一些流行的默认eslint配置包，而是选择了自定义规则。我的.eslintrc.json文件看起来像这样：],"overrides":[],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":"latest","sourceType":"module"},"plugins":["@typescript-eslint"],"rules":{"indent":["error",4],"linebreak-style":["error","unix"],"quotes":["error","single"],"semi":["error","always"]}}除了有专门的ESLintrc文件，我们还可以在package.json中添加配置，字段名为“eslintConfig”。此外，ESLint支持配置注解。如果文件中的某行代码或者所有代码的某条规则需要特殊处理，我们可以在文件中添加注释。例如关闭整个文件的semi（分号）规则：/*eslint-disablesemi*/关闭下一行的semi（分号）规则：//eslint-disable-next-linesemiconsta='Front-end西瓜哥的检查修复文件规则可以使用如下命令检查一个文件是否符合规则：npxeslintsrc/index.js#或者yarnruneslintsrc如果每次完成都要执行命令写代码，开发体验难免会差。强烈建议在编辑器中安装一个插件，可以提示错误并直接在代码所在的位置提供信息。如果您使用的是VSCode，则可以安装ESlint插件。要修复指定文件的规则，请将--fix添加到原始命令。npxeslintsrc/index.js--fixVSCode可以通过智能提示的QuickFix自动修复。请注意，并非所有规则错误都可以自动修复。例如，ESLint可以帮你把双引号改成单引号来修复，但是对于函数内容为空，需要添加内容的情况，ESLint就没法帮你写出来，也没有知道你想写什么。另外，有些情况下有多个alternativefixes，需要在编辑器的quickfix中选择一个。配置项规则我们来看看eslintrc的一些配置用法。可以在规则配置中指定一些特定的规则。比如"indent":["error",4]注解配置写法：/*eslintindent:["error",4]*/表示我们要缩进到4个空格。数组的第一个元素是错误级别。分为off/0：关闭规则；warn/1：警告级别，表示配合其他工具使用时编译通过，但会出现警告，VSCode使用插件后显示为黄色波浪线；error/2：错误级别，表示为Thecompilationfails(exitcodeis1)，VSCode使用插件后显示为红色波浪线。第二个和后续元素是特定的配置值。缩进是规则中的规则。其他具体规则可以参考eslint官方文档：https://eslint.org/docs/latest/rules/。配置项pluginsplugins可以为ESLint添加一些规则。比如eslint-plugin-react插件："plugins":["react"],"rules":{//props不能使用字面量布尔值//比如disabled={true}是不允许的，你needtousedisabled"react/jsx-boolean-value":["error","never"]}但是注意，这只是一个声明，不是应用这些规则，你需要在规则上应用，或者使用extends。配置项extendsextends是一套集成的完整解决方案，会预先设置插件、规则等配置。您可以将其视为另一个eslintrc文件。上面的"extends":["eslint:recommended","plugin:@typescript-eslint/recommended"]使用了ESLint自带的eslint:recommended，设置了一些默认规则。源码地址在这里：https://github.com/eslint/eslint/blob/main/conf/eslint-recommended.js。每次我们开发一个新项目，如果一个一个配置规则比较麻烦，我们通常会选择一个比较流行的进行扩展，然后再进行修改。当然你也可以自己开发一个。配置项env设置脚本环境。例如"env":{"browser":true,"es2021":true}，注释配置写法：/*eslint-envbrowser,es2021*/env可以指定多个环境。env对一些规则很有用，比如no-undef，意思是不能使用未定义的变量。但是有些变量其实是脚本所在的宿主环境提供的全局变量，比如浏览器的window，nodejs的进程。当提供env时，ESLint可以有一个环境变量的白名单，并在看到这些变量时跳过no-undef规则。可选环境值：https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments。配置项global设置全局变量。"globals":{"var1":"writable","var2":"readonly","var3":"off",}writable：表示可以修改。readonly：表示只读，不可修改。off：关闭配置注释写入方法：/*globalvar1:writable,var2:readonly*/配置项root设置应用配置文件的根目录。"root":true项目中一个文件的ESLint应用逻辑是从其所在目录递归查找所有ESLintrc文件，直到根目录/。通常我们希望在项目根部递归停止，不要在项目外引入ESLintrc。这时候我们可以用“root”来标记，表示这是根目录。配置项parserOptionsESLint默认使用ES5语法解析代码。如果你的代码使用了更高版本的ES，你需要配置parserOptions来指定转换后的AST所基于的版本。"parserOptions":{"ecmaVersion":"latest","sourceType":"module","ecmaFeatures":{"jsx":true}}，子配置项包括：ecmaVersion：ES版本，可以是3、5（默认值）、6（或2015年）、7（或2016年）...“最新”（ESLint当前支持的最新版本）。sourceType：可以设置为“script”（默认）或“module”（使用模块）。allowReserved：允许使用保留字作为变量名（如果是ES3）。ecmaFeatures：添加新的语言特性。是一个对象，包括jsx，impliedStrict（启用全局"usestrict;"），globalReturn（全局作用域可以返回，像commonjs模块本质上都是用函数实现的）。配置项parserESLint默认的解析器只支持js，并且只支持最终的ES标准，不支持实验特性。有时我们想使用实验性的ES特性，或者使用另一种语言，比如TypeScript，那么我们就不得不更换解析器。对于实验性的特性，我们可以使用babel:"parser":"@babel/eslint-parser"对于TypeScript:"parser":"@typescript-eslint/parser"保存时自动格式化这个插件，需要编辑器的帮助，保存时调用ESLint的fixAPI。比如在VSCode中，我们只需要在.vscode/settings.json中配置：{"editor.codeActionsOnSave":{"source.fixAll.eslint":true}}更多用法可以参考官方文档插件：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint。.eslintignore有些文件我们不想做eslint检查，因为它们可能是由脚本生成的。我们可以在项目根目录下创建一个.eslintignore文件。dist/*lang/zh_ch.js结束后，我会写一篇关于如何编写自定义ESLint规则的文章，敬请期待。
