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
上面編寫的ESLint插件包含了兩部分,一個是rules部分定義了這個插件自定義的規則,這里對應的是規則rule1。另一個是配置部分configs字段定義的規則集合,這里對應了config1。
使用插件myplugin
在插件中引入的規則和配置可以在項目的ESLint配置文件中使用。
插件中定義的規則(插件中rules下定義的規則)使用方法如下:
在配置文件中使用插件中的規則首先需要安裝插件(在plugins下引入插件),然后才能在rules字段下加上插件名 + / + ruleName的形式使用插件中定義的規則。
除了使用插件中定義的規則,還可以使用插件中定義好的配置(confings字段下定義的內容)。
使用插件中的配置則不需要像使用插件中的規則一樣顯示安裝插件(plugins: […])。
在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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: sessionStorage什么时候失效
- 下一篇: 网格布局之网格元素放置算法