eslint在我们的项目中应用很广泛，关于rules部分看个人需求可以查阅文档，这里简单阐述一下我自己对extends和plugins的理解

plugins

eslint本身也包含一些规则，但无法覆盖全部环境。因此它支持自定义规则，而根据不同环境这些自定义规则被集成了插件。每个插件都是一个单独的包，例如eslint-plugin-import、eslint-plugin-vue、eslint-plugin-react等。使用之前要先安装，然后写在plugins字段里

> ESLint 支持使用第三方插件。在使用插件之前，你必须使用 **npm 安装**它。在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 **eslint-plugin-** 前缀。
```js
{
    "plugins": [
        "plugin1", // eslint-plugin-plugin1的简写
        "eslint-plugin-plugin2"
    ]
}

但是plugins仅仅代表项目里引入了哪些规则，其实并没有生效，为什么呢，先看我们某个plugin里的代码

module.exports = {
    configs: {
        recommended: {
            plugins: ["plugin1"],
            env: ["browser"],
            rules: {
                a: 1,
                b: 0,
                a: 2,
            }
        },
        node: {
            plugins: ["plugin1"],
            env: ["node"],
            rules: {
                a: 0,
                b: 2,
                a: 1,
            }
        }
    }
}

因为我们并没有指明我们使用的是configs里的哪个风格的规则，每个风格针对一样的规则可能设置的等级不同0(off)、1(warn)、2(error)。所以这个时候extends就凸显出来作用了。假设我们要选择recommended风格，在extends字段中填写 ["plugin:plugin1/recommended"]。至此，项目便可以基于plugin1语法的recommended风格做代码检测

extends

属性值可以是：

指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
字符串数组：每个配置继承它前面的配置

怎么理解:

它其实算是一个集成的风格，实际上就是一个个别人写好的.eslintrc.*文件我们直接拿过来使用。
然后遇到冲突ESLint 会按照 extends 的顺序应用规则，后面的规则会覆盖前面的规则；
其实上面plugins数组里的plugin1也可以不写，因为configs里面其实已经声明过了依赖插件，写出来只是为了结构更清晰便于理解。

它可以是一个eslint配置文件的路径，也可以是我们下载的npm包或者插件的名称，亦或者是eslint推荐的一些风格例如eslint:recommended 或 eslint:all。当它是数组的时候，相当于是这些配置文件的集合，只不过后面相同名称的配置会覆盖之前的配置

书写规则:

可共享的配置

简单解释就是把我们写的eslint规则抽出来，发布一个npm包供大家下载使用,通常输出的是一个配置对象

module.exports = {
    globals: {
        MyGlobal: true
    },
    rules: {
        semi: [2, "always"]
    }
}

以eslint-config开头的安装包，例如eslint-config-standard可以省略前面的eslint-config

extends: standard 或者 extends: eslint-config-standard这两种写法都可以

插件

例如我们下载了一个eslint-plugin-vue的插件，本质上都是对rules的包装，那么怎么使用它呢，如下：

{
    "plugins": [
        "vue" // 这个是eslint-plugin-vue的缩写，插件声明
    ],
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended" // 这里是对改插件下的某一类配置对象的引用
    ],
    "rules": {
       "vue/require-v-for-key": "error" // 对具体eslint-plugin-vue插件下的某个规则的使用
    }
}

文件路径

extends 属性值可以是到基本配置文件的绝对路径，也可以是相对路径。ESLint 解析一个相对于使用它的配置文件的基本配置文件的相对路径。

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

Using "eslint:all/eslint:recommended"

值为 eslint:recommended 的 extends 属性启用一系列核心规则，这些规则报告一些常见问题，在规则页面中被标记为。这个推荐的子集只能在 ESLint 主要版本进行更新。

值为 eslint:all，启用当前安装的 ESLint 中所有的核心规则。这些规则可以在 ESLint 的任何版本进行更改。不推荐使用

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

        // override default options for rules from base configurations
        "comma-dangle": ["error", "always"],
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
        "no-console": "off",
    }
}

如何理解Eslint中的extends和plugins

plugins

extends