关于前端: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
"[javascript]": {
  "editor.formatOnSave": true
}

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

附加

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

参考这里

它有几个弊病

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

更多参考文档