5分钟带你了解eslint配置及Prettier集成2022年最新版|5分钟带你了解eslint配置及Prettier集成2022年最新版 #eslint8 5分钟带你了解eslint配置及Pre

eslint 基本配置温馨提示：文章内容基于当前最新的eslint8版本
命令生成eslint配置文件

npm init @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可以根据需要配置
参考 env 的更多配置项
extends
扩展规则集
扩展多个规则集使用数组
parserOptions
parserOptions.ecmaVersion: 启用对应esma版本对应的语法
parserOptions.sourceType: 代码是esm 就配置为module。

可以在此基础上做一些调整

module.exports = { "root": true, "env": { "browser": true, "es2021": true, "node": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "rules": { } }

这里加了一个 root: true, 将 ESLint 限制到一个特定的项目, 停止在父级目录查找。
配置支持React 安装对应插件

npm i eslint-plugin-react --save-dev

module.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 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
而eslint-config-xx这种包就是主要通过改变规则的严苛程度(有的规则可能支持额外参数)来二次配置的。
参考 eslint-config-prettier 源码
通过 plugin 启用自己想要单个或多个配置
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/parser

yarn add -D typescript @typescript-eslint/parser npm i --save-dev typescript @typescript-eslint/parser

安装对应插件

yarn add -D @typescript-eslint/eslint-plugin npm i --save-dev @typescript-eslint/eslint-plugin

重点：@typescript-eslint/parser & @typescript-eslint/eslint-plugin这两个包的版本要保持一致
更新配置文件 parser指定为@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"] }

通过 rules 二次配置规则
比如eqeqeq
eqeqeq的默认级别是error。参考这里

{ "rules": { "eqeqeq": "warn" } }

由错误改为警告,此规则还可以接受其他参数。参考这里
针对某个文件或者某类文件特殊化处理

{ "rules": { "quotes": ["error", "double"] },"overrides": [ { "files": ["bin/*.js", "lib/*.js"], "excludedFiles": "*.test.js", "rules": { "quotes": ["error", "single"] } } ] }

.eslintignore配置文件配置让eslint忽略的文件
配置方式参考.gitignore
eslint 配合 prettier
首先我们要明白prettier作用，这里借用官方的描述

In other words, use Prettier for formatting and linters for catching bugs!

更多内容参考这里
安装

npm i prettier eslint-config-prettier --save-dev

这里重点是 确保把prettier放在extends数组的最后, 这样才可以覆盖前面与prettier冲突的配置。

{ "extends": [ "some-other-config-you-use", "prettier" ] }

Note: You might find guides on the Internet saying you should also extend stuff like "prettier/react". Since version 8.0.0 of eslint-config-prettier, all you need to extend is "prettier"! That includes all plugins.

prettier 配置文件多种配置文件的格式(优先级按顺序排列)

A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
A .prettierrc.toml file.

贴一个我自己的配置文件 .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" : true, "prettier.tabWidth" : 4, "prettier.printWidth" : 120, "prettier.quoteProps" : "consistent", "prettier.jsxSingleQuote" : true, "prettier.singleQuote" : true, "prettier.bracketSpacing": false, "prettier.requirePragma": true, "prettier.semi": false, // Set the default "editor.formatOnSave": false, // Enable per-language "[javascript]": { "editor.formatOnSave": true }

最后的配置是保存文件的时候自动格式化，可以根据需要来配置
附加
在搜索prettier和linter的时候，你可能会看到eslint-plugin-prettier这个包，这个不推荐，但是特定场景下很有用。
【5分钟带你了解eslint配置及Prettier集成2022年最新版|5分钟带你了解eslint配置及Prettier集成2022年最新版 #eslint8】参考这里
它有几个弊端