使用ESLint很久了，也看了ESLint官方文檔很多遍，但對(duì)于ESLint配置的規(guī)則還是不勝清楚，例如：

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

上面extends的值為什么要"plugin:"開頭？這里的prettier插件需要顯示安裝嗎？像這樣plugins: ["prettier"]。

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

上面規(guī)則"prettier/prettier": "error"表示的是插件prettier中的規(guī)則prettier吧？

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

上面的規(guī)則extends值為啥又沒(méi)有"plugin:"前綴了呢？

為了解釋上面的幾個(gè)問(wèn)題，首先要從ESLint的插件和共享配置說(shuō)起。

ESLint插件

ESLint的規(guī)則十分便于擴(kuò)展，而擴(kuò)展的途徑就是為ESLint添加插件，插件文件的基礎(chǔ)格式是：
我們創(chuàng)建一個(gè)插件叫eslint-plugin-myplugin

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

上面編寫的ESLint插件包含了兩部分，一個(gè)是rules部分定義了這個(gè)插件自定義的規(guī)則，這里對(duì)應(yīng)的是規(guī)則rule1。另一個(gè)是配置部分configs字段定義的規(guī)則集合，這里對(duì)應(yīng)了config1。

使用插件myplugin

在插件中引入的規(guī)則和配置可以在項(xiàng)目的ESLint配置文件中使用。
插件中定義的規(guī)則（插件中rules下定義的規(guī)則）使用方法如下：

{"plugins": ["myplugin"], // 可以將eslint-plugin這個(gè)前綴省略"rules": {"myplugin/rule1": "error"} }

在配置文件中使用插件中的規(guī)則首先需要安裝插件（在plugins下引入插件），然后才能在rules字段下加上插件名 + / + ruleName的形式使用插件中定義的規(guī)則。

除了使用插件中定義的規(guī)則，還可以使用插件中定義好的配置（confings字段下定義的內(nèi)容）。
使用插件中的配置則不需要像使用插件中的規(guī)則一樣顯示安裝插件（plugins: […]）。

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

在extends字段中使用 plugin:pluginName/configName 的形式使用插件中定義的指定配置。
為什么需要plugin作為前綴了呢？
因?yàn)閑xtends繼承的配置有兩個(gè)來(lái)源，一個(gè)是插件中定義的，就像上面介紹的，eslint-config-configname也可以生成可共享配置。

eslint-config-myconfig

定義一個(gè)用于共享的配置包，這個(gè)包的名字最好以eslint-config開頭。

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

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

{"extends": ["myconfig"] }

直接 extends: [configName] 就完成了對(duì)配置文件的繼承。

參考

eslint-config-prettier
eslint-plugin-prettier

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。