eslint2022最新版本。基础配置提示：文章内容是根据当前最新eslint8版本命令生成eslint配置文件npminit@eslint/config。生成eslint配置文件。以.eslintrc.js为例。一个基本的例子module.exports={"env":{"browser":true,"es2021":true,"node":true},"extends":"eslint:recommended","parserOptions":{"ecmaVersion":"latest","sourceType":"module"},"rules":{}}简单介绍几个属性的含义env一个环境定义了一组预定义的全局变量，常用的三个['browser','node','es2021']其中es2021可以根据需要配置更多配置项参考envextendsextendedruleset使用数组parserOptionsparserOptions.ecmaVersion扩展多个规则集：启用对应esma版本的语法parserOptions.sourceType：代码为esm将其配置为一个模块即可。可以在此基础上做一些调整module.exports={"root":true,"env":{"browser":true,"es2021":true,"node":true},"extends":"eslint:recommended","parserOptions":{"ecmaVersion":"latest","sourceType":"module"},"rules":{}}这里加了一个root:true来限制ESLint到特定的项目中，停止查看父目录。配置对React的支持安装相应的插件npmieslint-plugin-react--save-devmodule.exports={"root":true,"env":{"browser":true,"es2021":true,"node":true},"extends":["eslint:recommended","plugin:react/recommended"],"parserOptions":{"ecmaVersion":"latest","sourceType":"module","jsx":true},"rules":{}}extends关键字扩展插件提供的规则集语法为plugin:name/type，其中name为去掉eslint-plugin-前缀后的剩余部分。这个语法是使用eslint-plugin-xxx的情况，我们经常会遇到eslint-config-xxx这样的包，比如eslint-config-prettier，eslint-config-airbnb是如何使用这个包提供的能力的呢？{"extends":["airbnb","prettier"]}忽略上面的前缀eslint-config-，eslint会自动帮你匹配。eslint-plugin-xx和eslint-config-xx的区别在于eslint-plugin-xx定义了一些规则供用户使用，而eslint-config-xx不同的是，它是基于已有的规则（包括eslint官方和第三方各方）在辅助配置上。eslint规则有3个等级“off”或者0-关闭规则“warn”或者1-开启规则，使用warning级别errors：warn（不会导致程序退出）“error”或者2-开启在规则上，使用errorLevelerror:error（触发时，程序会退出）和eslint-config-xx等包主要通过更改规则的严重性（某些规则可能支持额外的参数）进行二次配置。参考eslint-config-prettier源码通过插件开启。如果想在eslint配置文件中配置单个或者多个配置，还有一个plugin选项没有用到。下面说说它的作用。我们使用extends来扩展规则集，但我们不需要使用它。比如前面提到的eslint-plugin-react。{"plugins":["react"]}启用jsx支持{"parserOptions":{"ecmaFeatures":{"jsx":true}}}启用你想要的单个或多个规则"rules":{"react/jsx-uses-react":"error","react/jsx-uses-vars":"error",}支持TS安装Typescript和@typescript-eslint/parseryarnadd-Dtypescript@typescript-eslint/parsernpmi--save-devtypescript@typescript-eslint/parser安装对应的插件yarnadd-D@typescript-eslint/eslint-pluginnpmi--save-dev@typescript-eslint/eslint-plugin关键点：@typescript-eslint/parser&@typescript-eslint/eslint-plugin这两个包的版本应该是一致的。更新配置文件解析器指定@typescript-eslint/parser，将@typescript-eslint添加到plugins数组中，在rules中配置你想要的规则。{"parser":"@typescript-eslint/parser","plugins":["@typescript-eslint"],"rules":{"@typescript-eslint/rule-name":"error"}}你也你可以启用所有推荐的规则集，添加plugin:@typescript-eslint/recommended到extends{"extends":["plugin:@typescript-eslint/recommended"]}推荐的配置你也可以使用eslint:recommended这个插件一起使用{"extends":["eslint:recommended","plugin:@typescript-eslint/recommended"]}通过规则二级配置规则如eqeqeqeqeqeq的默认级别是错误的。从错误到警告参考{"rules":{"eqeqeq":"warn"}}，这个规则也可以接受其他参数。参考这里对某个文件或文件类型的特殊处理{"rules":{"quotes":["error","double"]},"overrides":[{"files":["bin/*.js","lib/*.js"],"excludedFiles":"*.test.js","rules":{"quotes":["error","single"]}}]}.eslintignore配置file配置eslint忽略的文件配置方法。参考.gitignoreeslint配合prettier。首先我们要了解prettier的作用。这里我们借用官方的描述，换句话说就是用Prettier来格式化，用linters来抓bug！更多信息，请参考这里安装npmiprettiereslint-config-prettier--save-dev这里的重点是保证prettier放在extends数组的末尾，这样之前和prettier冲突的配置可以被覆盖。{"extends":["some-other-config-you-use","prettier"]}注意：您可能会在Internet上找到指南，说您还应该扩展诸如“prettier/react”之类的东西。从eslint-config-prettier8.0.0版本开始，你需要扩展的只是“更漂亮”！这包括所有plugins.prettier配置文件package.json文件中的“更漂亮”键。用JSON或YAML编写的.prettierrc文件。.prettierrc.json、.prettierrc.yml、.prettierrc.yaml或.prettierrc.json5文件。使用module.exports.A.prettierrc.toml文件导出对象的.prettierrc.js、.prettierrc.cjs、prettier.config.js或prettier.config.cjs文件。贴一个我自己的配置文件.prettierrc{"trailingComma":"es5","singleQuote":true,"semi":true,"jsxSingleQuote":true,"endOfLine":"lf","printWidth":120,"tabWidth":4,"bracketSpacing":false,"bracketSameLine":false,"arrowParens":"avoid","singleAttributePerLine":true,"overrides":[{"files":".prettierrc","options":{"parser":"json"}},{"files":"*.config.js","options":{"parser":"babel"}}]}fallback如果老项目没有配置prettier，我不想配置一个单独的文件，又想使用prettier格式化，可以给vscode配置一个降级方案，即项目有prettier配置，优先使用项目中的配置“prettier.useTabs”：真实，“prettier.tabWidth”：4，“prettier.printWidth”：120，“prettier.quoteProps”：“一致”，“prettier.jsxSingleQuote”：真实，“prettier.singleQuote”：真实，“prettier.bracketSpacing”：false，“prettier.requirePragma”：true，“prettier.semi”：false，//设置默认值“editor.formatOnSave”：false，//启用每种语言[javascript]“：{"editor.formatOnSave":true}最后的配置是保存时自动格式化文件，你可以根据自己的需要配置。在搜索prettier和linter时，你可能会看到eslint-plugin-prettier包，不推荐使用，但在某些场景下很有用。作为参考，它有几个缺点。编辑器里有很多红色的波浪线，很烦人。prettier的作用就是让你忘记格式化，而不是面对它。它比直接使用prettier慢。这可能会引起更多参考文件的问题
