ESLint共享配置的两种方式eslint-plugin和eslint-config

使用ESLint很久了，也看了ESLint官方文档很多遍，但对于ESLint配置的规则还是不胜清楚，例如：

{
  "extends": ["plugin:prettier/recommended"]
}

上面extends的值为什么要"plugin:"开头？这里的prettier插件需要显示安装吗？像这样plugins: ["prettier"]。

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

上面规则"prettier/prettier": "error"表示的是插件prettier中的规则prettier吧？

{
  "extends": ["prettier"],
}

上面的规则extends值为啥又没有"plugin:"前缀了呢？

为了解释上面的几个问题，首先要从ESLint的插件和共享配置说起。

ESLint插件

ESLint的规则十分便于扩展，而扩展的途径就是为ESLint添加插件，插件文件的基础格式是：
我们创建一个插件叫eslint-plugin-myplugin

module.exports = {
	configs: {
      config1: {
        plugins: ['myplugin'],
        rules: {
			"myplugin/rule1": "error"
		}
	  }
    },
	rules: {
	  rule1: {
	    create: function (context) {
	        // rule implementation ...
	    }
	  }
	}
}

上面编写的ESLint插件包含了两部分，一个是rules部分定义了这个插件自定义的规则，这里对应的是规则rule1。另一个是配置部分configs字段定义的规则集合，这里对应了config1。

使用插件myplugin

在插件中引入的规则和配置可以在项目的ESLint配置文件中使用。
插件中定义的规则（插件中rules下定义的规则）使用方法如下：

{
	"plugins": ["myplugin"], // 可以将eslint-plugin这个前缀省略
	"rules": {
		"myplugin/rule1": "error"
	}
}

在配置文件中使用插件中的规则首先需要安装插件（在plugins下引入插件），然后才能在rules字段下加上插件名 + / + ruleName的形式使用插件中定义的规则。

除了使用插件中定义的规则，还可以使用插件中定义好的配置（confings字段下定义的内容）。
使用插件中的配置则不需要像使用插件中的规则一样显示安装插件（plugins: […]）。

{
	"extends": ["plugin:myplugin/config1"]
}

在extends字段中使用 plugin:pluginName/configName 的形式使用插件中定义的指定配置。
为什么需要plugin作为前缀了呢？
因为extends继承的配置有两个来源，一个是插件中定义的，就像上面介绍的，eslint-config-configname也可以生成可共享配置。

eslint-config-myconfig

定义一个用于共享的配置包，这个包的名字最好以eslint-config开头。

module.exports = {
	rules: {
		...
	}
}

定义好的包，可以在ESLint的配置文件中使用。

{
	"extends": ["myconfig"]
}

直接 extends: [configName] 就完成了对配置文件的继承。

参考

eslint-config-prettier
eslint-plugin-prettier