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

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"]
}

通过 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要慢
可能会在间接层面导致问题

更多参考文档