关于前端: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"]
}

举荐的配置

你也能够把 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
"": {"editor.formatOnSave": true}

最初的配置是保留文件的时候主动格式化，能够依据须要来配置

附加

在搜寻 prettier 和 linter 的时候，你可能会看到 eslint-plugin-prettier 这个包，这个不举荐，然而特定场景下很有用。

参考这里

它有几个弊病

• 编辑器里很多的红色波浪线，很烦人，prettier 的作用是让你遗记格式化这件事，而不是面对它
• 这比间接应用 prettier 要慢
• 可能会在间接层面导致问题

更多参考文档