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/parsernpm i --save-dev typescript @typescript-eslint/parser

装置对应插件

yarn add -D @typescript-eslint/eslint-pluginnpm 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要慢
  • 可能会在间接层面导致问题

更多参考文档