OneYoung

Appearance

extends 属性可以用来配置继承或扩展。

在实际应用中，它会包含 rules、plugins 和 language options 属性。

5-1.基础使用 ​

extends 属性值可以是：

  1. 指定配置字符串：配置文件的路径、可共享配置的名称（eslint-config-*、eslint-plugin-*）、eslint内置配置（eslint:recommended 或 eslint:all）。
  2. 字符串数组：一系列字符串配置的集合。每个配置继承它前面的配置。
js
module.exports = {
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    './lib/rules'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

5-2.配置的优先级 ​

事实上 extends 有 3 种含义的配置：

  1. 基础配置
  2. 派生配置
  3. 合并结果配置

以 rules 选项为例来说明，这 3 种配置的实际执行效果：

  1. 如果派生配置没有与基础配置冲突的配置，此时相当于启用了额外配置，完全的追加效果。
  2. 当规则冲突时，以派生配置为主，但该条规则的配置选项不变：
  • 基础配置："eqeqeq": ["error", "allow-null"]
  • 派生配置："eqeqeq": "warn"
  • 合并结果配置："eqeqeq": ["warn", "allow-null"]
  1. 当规则的配置选项冲突时，以派生配置为主，覆盖基础配置中的规则配置选项：
  • 基础配置："quotes": ["error", "single", "avoid-escape"]
  • 派生配置："quotes": ["error", "single"]
  • 合并结果配置："quotes": ["error", "single"]
  1. 当规则的配置选项冲突时，以派生配置为主，如果是对象形式时：
  • 基础配置："max-lines": ["error", { "max": 200, "skipBlankLines": true, "skipComments": true }]
  • 派生配置："max-lines": ["error", { "max": 100 }]
  • 合并结果配置："max-lines": ["error", { "max": 100 }]

TIP

基础配置，应当指的是 Eslint 自带的配置。

可以总结成一句话，当基础配置与派生配置冲突时，统一以派生配置为主，无论是 rules 中的某一条规则还是该条规则的配置选项。

配置文件的路径，可以是绝对路径或者相对路径（相对于 .eslintrc.* 等配置文件）。这里有一个例子：

js
module.exports = {
  extends: [
    './lib/rules.js'
  ],
  rules: {
  }
}

5-3.可共享配置 ​

可共享配置指的其实就是 npm 上的第三方包，分为两部分：

  1. 配置包，即第三方配置包，它可以是 config 配置或者 plugin 中的配置。
  2. 内置配置，即 Eslint 内置配置包。

第三方配置包，它们一般都有特定的命名格式 eslint-config-*。

TIP

在 extends 中配置 eslint-config-* 时，是可以省略 eslint-config- 前缀的。

也可以省略 eslint-plugin-*。

譬如 airbnb-base 可以写作 eslint-config-airbnb，plugin:vue/vue3-essential 代表的是 eslint-plugin-vue/vue3-essential。

js
module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'airbnb-base',
  ]
}

5-4.内置配置 ​

eslint:recommended 和 eslint:all 是 eslint 内置的部分配置。

关于 eslint:recommended，它会启用 eslint 推荐使用的核心语法。

可以在这里 rules 查到一部分相关配置介绍。

例子：

js
module.exports = {
  extends: 'eslint:recommended',
  rules: {
    // enable additional rules
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // override configuration set by extending "eslint:recommended"
    "no-empty": "warn",
    "no-cond-assign": ["error", "always"],

    // disable rules from base configurations
    "for-direction": "off"
  }
}

关于 eslint:all，它会启用 eslint 所有的核心语法。

但要注意的是，该配置并不推荐在业务项目中使用。

因为该配置会随着 Eslint 的版本变动而发生改动，使用时需要自己评估风险。

js
module.exports = {
  "extends": "eslint:all",
  "rules": {
    // override default options
    "comma-dangle": ["error", "always"],
    "indent": ["error", 2],
    "no-cond-assign": ["error", "always"],

    // disable now, but enable in the future
    "one-var": "off", // ["error", "never"]

    // disable
    "init-declarations": "off",
    "no-console": "off",
    "no-inline-comments": "off",
  }
}