使用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

總結

以上是生活随笔為你收集整理的ESLint共享配置的两种方式eslint-plugin和eslint-config的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。