ESlint 配置从0到1 (二)

配置插件

ESlint 支持第三方插件,在使用之前需要先将插件下载到本地。这里需要注意的是,如果 ESlint 是全局安装的,那么第三方插件也必须要安装为全局;局部安装也同理。

在配置文件中通过设置 plugins 的属性值来配置插件,plugins 值是一组插件名列表,插件名可以省略前缀的 eslint-plugin。比如:

{
  "plugins": [
    "plugin1",
    "eslint-plugin-plugin2"
  ]
}
复制代码

添加共享设置

ESlint 支持在配置文件中添加共享设置,在共享设置中设置的对象能被任一即将执行的规则获取到,所以这在开发自定义规则插件而言很重要,可如下设置:

{
  "settings": {
    "sharedData": "Hello"
  }
}
复制代码

配置文件的使用

配置文件的使用分为两种方式:

  1. 使用 .eslintrc.* 或 package.json 文件来进行配置。 ESlint 会自动沿着当前文件的父目录直到文件系统的根目录(除非配置文件中指定了 root: true)一直查找这两个文件。这种方式有利于对一个文件的不同部分采用不同的配置或是当你想要不传递配置文件也能正常使用 ESlint 的情景。
  2. 另一种是通过命令行的方式制定配置文件,使用方式如下:
// 使用这个文件作为额外的配置文件,如存在 .eslintrc.* 文件则覆盖选项
eslint -c myconfig.json 
// 若希望完全不用 .eslintrc.* 中的配置,不过要注意需要和 -c 命令搭配使用
eslint --no-eslintrc
复制代码

配置文件格式优先级

ESlint支持几种格式的配置文件,优先级排序如下:

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

配置的层叠以及优先级

配置的层叠机制为:距离文件最近的 .eslintrc 优先级最高,其次是父文件夹中的,以此类推。若遇上不同的 .eslintrc 文件之间有冲突的属性,则优先级高的覆盖优先级低的(同级别的配置可根据上面提到的文件格式优先级决定)。

由于 ESlint 默认会从文件当前目录一直查找到系统根目录,可能会导致一些意料之外的结果。要想避免这种默认行为,可以在当前项目的根目录中的配置文件添加 root: true,配置之后往上查找会在项目根目录终止。

完整的优先级由高到低排序如下:

  • 行内配置
    1. /eslint-disable/ and /eslint-enable/
    2. /global/
    3. /eslint/
    4. /eslint-env/
  • CLI 配置选项
    1. --global
    2. --rule
    3. --env
    4. -c, --config
  • 配置文件,优先级如上所述

扩展配置文件

在配置文件中,通过配置 extends 我们可以在基础配置之上对规则进行扩展。extend 可选的值有:

  • 用来指定配置的字符串
  • 字符串组成的数组,其中每个额外的配置都是作为前面配置的扩展

而在配置文件中定义的 rules 可以在扩展配置中进行扩展(如存在冲突则覆盖)。

官方提供的扩展有 eslint:recommendedeslint:all,其中 eslint:recommended 包括了规则列表中有 ✔ 标记的规则项;eslint:all 包含了当前版本的 ESlint 包含的所有规则项,由于这个扩展经常随着 ESLint 的版本更新变动,故在生产模式下不推荐使用。

我们也可以使用插件中的配置,对于这类扩展,extends 属性值可以由以下部分组成:

  • plugin:
  • 包名称(可以省略前缀)
  • /
  • 配置名称

比如下面这个扩展:

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-set-state": "off"
  }
}
复制代码

除此之外,还可以使用自定义的配置文件,比如:

{
  "extends": [
    "./node_modules/coding-standard/eslintDefaults.js",
    "./node_modules/coding-standard/.eslintrc-es6",
    "./node_modules/coding-standard/.eslintrc-jsx"
  ],
  "rules": {
    "eqeqeq": "warn"
  }
}
复制代码

基于匹配模式的配置

有时候我们需要对配置进行更精细的控制,比如同一个目录下的文件要有不同的配置。要达到这个目的,我们可以将配置写入 overrides 属性中,它将只被应用到符合匹配模式中的文件中。具体规则如下:

  • 匹配模式只能被配置在配置文件中。
  • 匹配是基于配置文件所处文件夹的路径。比如配置文件所处路径为 /User/imyjay/my-project/.eslintrc.js,需要匹配的文件路径是 /User/imyjay/my-project/src/jay.js,那么我们要填入的匹配应为 src/jay.js
  • 匹配模式中的配置比当前配置文件内的普通配置优先级要高,且越靠后的匹配优先级越高。
  • 在匹配模式中的配置项可以是除了 extendsoverridesroot 之外的任意项。
  • 也可以在匹配模式中的指定移除特定匹配,可以参照以下的例子:
{
  "rules": {
    "quotes": ["error", "double"]
  },

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}
复制代码

为 lint 配置扩展名

目前只能通过 --ext 命令进行这一操作。

忽略文件和文件夹

  • .eslintignore 通过在项目根目录创建 .eslintignore 文件,再讲需要忽略的文件和文件夹名称或模式填入,就可以达到忽略的目的。.eslintignore 有且只能有一个,且只有当前工作目录下的会被使用。(注:语法和 .gitignore 相同)
  • 在命令行中使用 --ignore-path
  • 在 package.json 中配置 eslintIgnore 属性,比如:"eslintIgnore": ["hello.js", "world.js"]

转载于:https://juejin.im/post/5d0110fb6fb9a07ee27b0ef0

猜你喜欢

转载自blog.csdn.net/weixin_34380296/article/details/93173518
今日推荐