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扩展规则集
扩展多个规则集使用数组parserOptionsparserOptions.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-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 - 开启规则，使用警告级别的错误：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这个包，这个不推荐，但是特定场景下很有用。
参考这里
它有几个弊端
- 编辑器里很多的红色波浪线，很烦人，prettier 的作用是让你忘记格式化这件事，而不是面对它
- 这比直接使用prettier要慢
- 可能会在间接层面导致问题
更多参考文档