關(guān)于eslint+prettier+husky的配置及說(shuō)明

更新時(shí)間：2022年07月31日 10:29:14 作者：笑道三千

這篇文章主要介紹了關(guān)于eslint+prettier+husky的配置及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一.eslint

eslint它規(guī)范的是代碼偏向語(yǔ)法層面上的風(fēng)格。本篇文章以一個(gè)基本的vue項(xiàng)目，來(lái)說(shuō)明eslint+prettier+husky配置項(xiàng)目代碼規(guī)范，為了更好的描述本文，我恢復(fù)了vscode的默認(rèn)設(shè)置（即未安裝eslint,prettier等插件，setting中也沒有相關(guān)配置）

1.新建一個(gè)空的vue2.x項(xiàng)目(不安裝eslint)

vue create eslint-test

2.單獨(dú)安裝selint

npm install eslint --save-dev

npx eslint --init

生成.eslintrc.js文件：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",//繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
        "plugin:vue/essential"http:// 此項(xiàng)是用來(lái)配置vue.js風(fēng)格
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

3.查看這個(gè)推薦的默認(rèn)規(guī)則

這里的規(guī)則，寫在后面的會(huì)覆蓋前面的，并且rules中的規(guī)則最后會(huì)覆蓋這里的，所以我們自定義規(guī)則就是寫在rules中，才能覆蓋之前的規(guī)則，從而生效。

"extends": [
    "eslint:recommended",//繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
    "plugin:vue/essential"http:// 此項(xiàng)是用來(lái)配置vue.js風(fēng)格https://eslint.vuejs.org/rules
],

quotes - Rules - ESLint中文

Available rules | eslint-plugin-vue (vuejs.org)

這個(gè)默認(rèn)規(guī)則是怎么生效的呢？舉個(gè)例子，我們點(diǎn)進(jìn)去鏈接，可以看到這個(gè)no-debugger是打上了對(duì)勾（也就是"eslint:recommended"）中生效的規(guī)則，然后我們?cè)僭陧?xiàng)目中寫個(gè)debugger，然后命令行運(yùn)行檢查eslint的命令，就會(huì)報(bào)錯(cuò)了。

項(xiàng)目根目錄執(zhí)行：

npx eslint --ext .vue src/
等價(jià)于：./node_modules/.bin/eslint --ext .vue src/
--ext:可以指定在指定目錄/文件
.vue：vue文件
src/：在src目錄下匹配

4.自定義規(guī)則

Eslint附帶了大量的校驗(yàn)規(guī)則，這些規(guī)則的值分別有如下規(guī)律：

off | 0 :表示關(guān)閉規(guī)則。
warn | 1 :表示將該規(guī)則轉(zhuǎn)換為警告。
error | 2 :表示將該規(guī)則轉(zhuǎn)換為錯(cuò)誤。

常見的rules規(guī)則，可以看官網(wǎng)：List of available rules - ESLint中文

// "semi": [2, "always"],//語(yǔ)句強(qiáng)制分號(hào)結(jié)尾
// "quotes": [2, "double"],//引號(hào)類型 ""
//"no-alert": 0,//禁止使用alert
//"no-console": 2,//禁止使用console
//"no-const-assign": 2,//禁止修改const聲明的變量
//"no-debugger": 2,//禁止使用debugger
//"no-duplicate-case": 2,//switch中的case標(biāo)簽不能重復(fù)
//"no-extra-semi": 2,//禁止多余的冒號(hào)
//"no-multi-spaces": 1,//不能用多余的空格

當(dāng)我們這樣自定義配置結(jié)尾必須分號(hào)之后，再運(yùn)行檢查，項(xiàng)目中就會(huì)報(bào)對(duì)應(yīng)的錯(cuò)：

5.package.json中配置檢查命令行

上文中，我們是手動(dòng)輸入命令行來(lái)檢查代碼是否符合eslint規(guī)范的，這樣每次檢查都要輸入一遍，有的人要是記不住這命令怎么辦？于是可以在package.json的script中寫死這個(gè)腳本：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/",

于是，項(xiàng)目根目錄運(yùn)行npm run lint，實(shí)際上就是運(yùn)行：

npx eslint --ext .js --ext .jsx --ext .vue src/

從而實(shí)現(xiàn)代碼的檢查：

6.eslint插件自動(dòng)檢查規(guī)范

難道每次寫完一句代碼，都要npm run lint來(lái)檢查下是否符合規(guī)范嘛？那樣太麻煩了。于是有eslint插件，這里我用的是vscode，打開插件市場(chǎng)，搜索到eslint，安裝即可：

安裝了之后什么效果呢？就是它會(huì)自動(dòng)檢查你的代碼是否符號(hào)規(guī)范，并且會(huì)在編輯器中標(biāo)識(shí)出來(lái)哪里不符合規(guī)范，底下終端處還會(huì)羅列出問(wèn)題：

7.package.json中配置自動(dòng)修復(fù)命令行

比如說(shuō)上文咱們寫了好多這種bug，一個(gè)一個(gè)手動(dòng)修復(fù)，太麻煩了。eslint提供了一個(gè)–fix的命令行，可以實(shí)現(xiàn)自動(dòng)修復(fù)不符合規(guī)范的代碼，但是這種修復(fù)不是萬(wàn)能的，官網(wǎng)中說(shuō)，有這個(gè)（扳手）??的圖標(biāo)對(duì)應(yīng)的規(guī)則才是可以修復(fù)的。

可以看到，debugger這個(gè)規(guī)則應(yīng)該是不能修復(fù)的，而分號(hào)這個(gè)是可以自動(dòng)修復(fù)的。

具體的命令行，同樣設(shè)置到package.json中：

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

在根目錄執(zhí)行這個(gè)npm run lint-fix:

可以看到分號(hào)的錯(cuò)誤被修復(fù)了，而debugger無(wú)法自動(dòng)修復(fù)，只能手動(dòng)修復(fù)。

8.在vscode中配置setting,讓每次保存代碼時(shí)自動(dòng)修復(fù)

先不考慮debugger這種只能手動(dòng)修復(fù)的，在實(shí)際寫代碼中，更多時(shí)候遇到的是分號(hào)啦，單雙引號(hào)啦這些可以被自動(dòng)修復(fù)的錯(cuò)誤，那么，我們還需要每次去手動(dòng)敲npm run lint-fix嘛？那同樣效率很低。現(xiàn)在利用vscode的eslint插件我們已經(jīng)能一寫完代碼，就知道是否符合規(guī)范了。然而我們還想實(shí)現(xiàn)的是每次寫完代碼，按下ctrl+s保存時(shí)，它能夠自動(dòng)修復(fù)。

幸運(yùn)的是，vscode的setting.json能夠幫助我們實(shí)現(xiàn)這一點(diǎn)：

在vscode中按快捷鍵ctrl+shift+p，輸入setting,打開setting.json

增加這段配置即可（如果未生效重啟vscode）：

 //配置保存時(shí)按照eslint文件的規(guī)則來(lái)處理一下代碼
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "eslint.autoFixOnSave" : true,
  },

222222

可以看到，我一按保存，就自動(dòng)修復(fù)了分號(hào)的問(wèn)題。

9.配置eslintignore

有些文件，我們不希望它受eslint管轄，可以在根目錄新建.eslintignore文件，把想要自由的文件或目錄丟進(jìn)去即可：

.eslintrc.js
.prettierrc.js
babel.config.js
vetur.config.js
/node_modules/

10.總結(jié)

反思幾個(gè)問(wèn)題：

我們?yōu)槭裁葱枰猠slint？

因?yàn)槊總€(gè)人的代碼習(xí)慣不一樣，每個(gè)開發(fā)人員都需要和他人協(xié)作或者項(xiàng)目需要交接給下一代開發(fā)者。保持統(tǒng)一的代碼規(guī)范，可以極大地提高效率，降低溝通和理解代碼的成本。

既然已經(jīng)有vscode的eslint插件幫助我們自動(dòng)檢查和修復(fù)代碼了，為什么還需要在pakage.json中配置eslint命令行？

因?yàn)関scode是我們自己電腦上的編輯器，我們不能保證另一個(gè)人拿到我們的代碼時(shí)他也是用vscode的（也許他用記事本？）。就算他用vscode,我們也不能保證他安裝了eslint插件。，他就可以使用pakage.json的命令行來(lái)檢查和修復(fù)代碼。因?yàn)轫?xiàng)目中肯定需要安裝eslint依賴，也肯定有我們配置的.eslintrc.js規(guī)則文件，這樣依舊能保證代碼的統(tǒng)一規(guī)范。

二.prettier

1.prettier的作用

上文我們配置了eslint,它規(guī)范的是代碼偏向語(yǔ)法層面上的風(fēng)格。比如說(shuō)不能使用console啦，箭頭函數(shù)參數(shù)必須包裹在括號(hào)中啦這些。

而項(xiàng)目中有時(shí)候，我們寫代碼刪刪改改，或者是個(gè)人的代碼習(xí)慣，就有可能出現(xiàn)這樣的代碼：

<script>
	import HelloWorld from './components/HelloWorld.vue';
        export default {
                name: 'App',
        components: {
    HelloWorld
  }
};
</script>

排版很亂，或者寫html時(shí)，太長(zhǎng)了換不換行之類的代碼排版問(wèn)題，就需要prettier來(lái)規(guī)范。

也就是說(shuō)，prettier規(guī)范的是代碼偏向于排版層面上的風(fēng)格。

2.安裝prettier

npm install --save-dev --save-exact prettier

3.使用命令行修復(fù)格式化

npx prettier --write src/

可以看到，我原先故意寫亂的代碼，變得整齊了。

4.配置自定義的prettier規(guī)則

需要在根目錄新建一個(gè)文件.prettierrc.js（則需要module.export）,如果是.prettierrc(則只需要json格式)：

//此處的規(guī)則供參考，其中多半其實(shí)都是默認(rèn)值，可以根據(jù)個(gè)人習(xí)慣改寫
module.exports = {
    printWidth: 80, //單行長(zhǎng)度
    tabWidth: 2, //縮進(jìn)長(zhǎng)度
    useTabs: false, //使用空格代替tab縮進(jìn)
    semi: false, //句末使用分號(hào)
    singleQuote: false, //使用單引號(hào)
    arrowParens: "avoid",//單參數(shù)箭頭函數(shù)參數(shù)周圍使用圓括號(hào)-eg: (x) => xavoid：省略括號(hào)
    bracketSpacing: true,//在對(duì)象前后添加空格-eg: { foo: bar }
    insertPragma: false,//在已被preitter格式化的文件頂部加上標(biāo)注
    jsxBracketSameLine: false,//多屬性html標(biāo)簽的‘>'折行放置
    rangeStart: 0,
    requirePragma: false,//無(wú)需頂部注釋即可格式化
    trailingComma: "none",//多行時(shí)盡可能打印尾隨逗號(hào)
    useTabs: false//使用空格代替tab縮進(jìn)
  };

為了測(cè)試是否生效，我故意把句末是否使用分號(hào)寫成了false(上文中eslint是需要分號(hào)的)。執(zhí)行npx prettier --write src/，可以看到，分號(hào)被取消了，但是不滿足eslint規(guī)則，報(bào)錯(cuò)了：

沖突的問(wèn)題稍后再說(shuō)，這里只是說(shuō)明我們配置的.prettierrc.js是生效的。

5.prettier插件保存代碼自動(dòng)修復(fù)

同樣的，我們不可能每寫一行代碼，就運(yùn)行npx prettier --write src/來(lái)美化一次代碼，我們希望保存代碼時(shí)，就能夠自動(dòng)格式化代碼。于是又需要安裝prettier插件。

然后再ctrl+shift+p打開vscode的setting.json文件，添加如下配置：

 //prettier可以格式化很多種格式，所以需要在這里對(duì)應(yīng)配置下
 "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //這個(gè)設(shè)置在ctrl+s的時(shí)候，會(huì)啟用默認(rèn)的格式化，這里是prettier
  "editor.formatOnSave": true

這時(shí)候按保存代碼，會(huì)發(fā)現(xiàn)在閃動(dòng)，依舊是報(bào)eslint的錯(cuò)：

333

這是因?yàn)閑slint的規(guī)則和prettier沖突了，當(dāng)我們保存的時(shí)候。先執(zhí)行eslint的自動(dòng)修復(fù)，于是分號(hào)會(huì)加上。然后又執(zhí)行prettier的修復(fù)，分號(hào)又去除，這就導(dǎo)致閃動(dòng)，到頭來(lái)還是報(bào)eslint的錯(cuò)。這里主要是體現(xiàn)prettier在保存代碼時(shí)能夠自動(dòng)修復(fù)，沖突的問(wèn)題依舊先放到后面說(shuō)。

6.讓編譯器能報(bào)prettier的錯(cuò)

到目前為止，對(duì)于prettier,我們還無(wú)法查看哪里不符合規(guī)則，而只是通過(guò)自動(dòng)修復(fù)來(lái)規(guī)范代碼風(fēng)格?，F(xiàn)在我們想像eslint一樣，代碼一寫，如果不符合，就出現(xiàn)紅色的波浪線提示哪里有問(wèn)題。

這個(gè)要怎么實(shí)現(xiàn)呢？可以利用eslint的報(bào)錯(cuò)，把prettier當(dāng)成eslint的插件注入eslint中，讓eslint來(lái)報(bào)這個(gè)錯(cuò)（實(shí)際上還是vscode的eslint實(shí)現(xiàn)的）

安裝依賴：

npm i -D eslint-plugin-prettier

然后再在.eslintrc.js 配置文件中添加這個(gè)配置，意思就是使用 eslint 報(bào)prettier的錯(cuò)誤：

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

這樣設(shè)置后，我故意把代碼排版變亂：

可以注意到，編輯器已經(jīng)可以同時(shí)報(bào)eslint和prettier的錯(cuò)誤了。

這時(shí)保存下代碼，除了沖突的部分，都會(huì)被自動(dòng)修復(fù)。

接下來(lái)可以著手解決這兩家伙沖突的問(wèn)題了。

7.解決eslint和prettier的沖突問(wèn)題

先說(shuō)一個(gè)事情，其實(shí)上文中我反復(fù)說(shuō)的沖突。并不是真正意義上的eslint和prettier的沖突。因?yàn)樯衔牡臎_突，eslint的規(guī)則設(shè)置在.eslintrc.js的rules中，prettier的設(shè)置在prettierrc.js中，這兩者都是我們開發(fā)者自己設(shè)置的！這分明是前端程序員自己傻逼，給編輯器下絆子！（這么說(shuō)大家別打我，我還年輕還沒娶媳婦……）

我解釋一下沖突的緣由，就能夠理解我為啥這么說(shuō)了。

首先，我們是安裝了eslint。

那這個(gè)eslint要能校驗(yàn)代碼，它肯定是有一套默認(rèn)的代碼規(guī)范的。

上文中第一章節(jié)第三點(diǎn)說(shuō)過(guò)

"extends": [
    "eslint:recommended",//繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
    "plugin:vue/essential"http:// 此項(xiàng)是用來(lái)配置vue.js風(fēng)格
],

這里的eslint:recommended就是這套默認(rèn)規(guī)則，當(dāng)然有時(shí)候我們不用這套規(guī)則。會(huì)用其他成熟的規(guī)則方案例如Airbnb 規(guī)范。比如這里我就額外引入了plugin:vue/essential，作為vue文件的規(guī)范。

這里需要再?gòu)?qiáng)調(diào)一點(diǎn)，這個(gè)extends數(shù)組中的規(guī)則，后面的會(huì)覆蓋前面的，也就是vue/essential會(huì)覆蓋掉recommended中的重復(fù)部分。

并且這里的規(guī)則是由安裝依賴引入的，存放在node_modules文件夾中，也就是為了保證其他開發(fā)人員代碼一致，這里面的文件是不允許改動(dòng)的。

所以說(shuō)eslint和prettier的沖突問(wèn)題，其實(shí)說(shuō)的是這些依賴引入的規(guī)則和prettier的沖突！

而不是你自己配置的eslint中的rules和你自己配置的prettier沖突。

為了證明我的說(shuō)法，我去node_modules/eslint/conf/eslint-recommended.js增加一個(gè)eslint規(guī)則：（這個(gè)文件中設(shè)置的規(guī)則上文說(shuō)過(guò)是官網(wǎng)中打了勾的部分，quotes不在默認(rèn)規(guī)則里，為了好理解，我手動(dòng)添加一個(gè)）

現(xiàn)在eslint中的配置是這樣，我把自定義的配置關(guān)閉掉，prettier中是這樣。即eslint默認(rèn)配置需要雙引號(hào)，prettier設(shè)置需要單引號(hào)，兩者是沖突的：

這時(shí)候我再按ctrl+s保存代碼，就可以看到兩者沖突了。（修改后未生效，需要重啟vscode）:

4444

網(wǎng)上說(shuō)的解決沖突的依賴安裝一下：

npm i -D eslint-config-prettier

把prettier設(shè)置的規(guī)則添加到extends數(shù)組中：

  extends: [
    'eslint:recommended', //繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
    'plugin:vue/essential', // 此項(xiàng)是用來(lái)配置vue.js風(fēng)格
    'prettier',//把prettier中設(shè)置的規(guī)則添加進(jìn)來(lái)，讓它覆蓋上面設(shè)置的規(guī)則。這樣就不會(huì)和上面的規(guī)則沖突了
  ],

這樣一來(lái)，就讓在它之前的所有可能會(huì)與 prettier 規(guī)則存在沖突的 eslint規(guī)則失效，并使用 prettier 的規(guī)則進(jìn)行代碼檢查。

接著，在項(xiàng)目中ctrl+s報(bào)錯(cuò)代碼，可以看到報(bào)錯(cuò)消失，變成了prettier設(shè)置的單引號(hào)了：

這才是真正意義上的解決沖突。

接下來(lái)，再來(lái)說(shuō)rules中的沖突怎么辦？它的優(yōu)先級(jí)要高于extends中的規(guī)則，而extends中沖突的規(guī)則已經(jīng)被prettier搞失效了，你又在rules中再定義，于是又會(huì)和prettier中產(chǎn)生沖突。

也就是說(shuō)，上文解決沖突只會(huì)解決extends中的沖突。不會(huì)解決rules中的沖突！

那我們這種沖突應(yīng)該怎么解決？

第一種方案：把自己想要的規(guī)則配置成npm包發(fā)布，然后引入到這個(gè)extends數(shù)組中。
第二種方案：relus中的配置和prettier中的保持一致即可。

8.讓沒有安裝prettier的項(xiàng)目也能代碼格式化

有的時(shí)候，我們的項(xiàng)目并沒有配置prettier,而我們希望在vscode中可以在保存代碼時(shí)美化代碼。就可以在ctrl+shift+p打開setting.json配置prettier規(guī)則：

 /*  prettier的配置 */
  "prettier.printWidth": 80, // 超過(guò)最大值換行
  "prettier.tabWidth": 2, // 縮進(jìn)字節(jié)數(shù)
  "prettier.useTabs": false, // 句尾添加分號(hào)
  "prettier.singleQuote": false, // 使用單引號(hào)代替雙引號(hào)
  "prettier.proseWrap": "preserve", //  (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)。avoid：省略括號(hào)
  "prettier.bracketSpacing": true, // 在對(duì)象，數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"
  "prettier.endOfLine": "auto", // 結(jié)尾是 \n \r \n\r auto
  "prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項(xiàng)目的.prettierignore文件中
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨(dú)放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用單引號(hào)代替雙引號(hào)
  "prettier.parser": "babylon", // 格式化的解析器，默認(rèn)是babylon
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進(jìn)行校驗(yàn)
  "prettier.trailingComma": "none", // 在對(duì)象或數(shù)組最后一個(gè)元素后面是否加逗號(hào)（在ES5中加尾逗號(hào)）
  "prettier.tslintIntegration": false,
  "prettier.arrowParens": "avoid"

9.總結(jié)

反思問(wèn)題：

既然vscode中設(shè)置了pettier(上文第八點(diǎn))，已經(jīng)能夠格式化代碼了，還要安裝prettier依賴，去配置格式。

原因和eslint中一樣，vscode中配置的，其他人也許不用vscode，也許安裝了vscode,但是沒有在setting.json中設(shè)置規(guī)范。而項(xiàng)目讀取prettier規(guī)范時(shí)有一個(gè)優(yōu)先級(jí)的，如果在根目錄找到了.prettier文件，則不會(huì)去查找setting.json中的規(guī)則了。只有找不到.prettier文件時(shí)，我們配置在setting.json中的規(guī)則才會(huì)生效。

三.提交代碼時(shí)eslint校驗(yàn)

1.husky

為了保證每次提交的 git 代碼是正確的，為此我們可以使用 eslint 配合 git hook，在進(jìn)行g(shù)it commit 的時(shí)候驗(yàn)證eslint規(guī)范

如果 eslint 驗(yàn)證不通過(guò)，則不能提交。

我們需要安裝一個(gè) git 的 hook 工具 – husky （我剛開始安裝的是最新版本，發(fā)現(xiàn)沒有生效，回退后才生效）

npm install husky@4.3.8 --save-dev

然后在package.json中增加配置：

"husky": {
    "hooks": {
      "pre-commit": "echo 'husky' && npm run lint"
    }
  }

意思是在進(jìn)行 git commit 的時(shí)候先去執(zhí)行 pre-commit 里面的命令：我們?cè)谶@里輸出 husky 并且執(zhí)行 npm run lint (我們?cè)谏衔牡谝徽?，?點(diǎn)加上的驗(yàn)證eslint的命令)

如果eslint驗(yàn)證通過(guò)了，則會(huì)進(jìn)行commit 操作，否則會(huì)報(bào)eslint的錯(cuò)誤提示。

生效的標(biāo)志是項(xiàng)目的.git/hooks目錄下，會(huì)生成一堆文件，原本是只有pre-commit.sample這類文件，等husky安裝完成，會(huì)多出pre-commit等文件。

再運(yùn)行g(shù)it commit命令，就會(huì)檢查代碼了。

2.lint-staged

如果這是一個(gè)新項(xiàng)目以上的就已經(jīng)滿足要求了，但是如果拿到的項(xiàng)目是一個(gè)老項(xiàng)目呢，別人開發(fā)了很久，這個(gè)時(shí)候加入再加入 eslint 規(guī)則，全局去檢查，會(huì)發(fā)現(xiàn)一堆報(bào)錯(cuò)信息。這個(gè)就慌了。修改可能帶來(lái)其他問(wèn)題。

為了解決這種問(wèn)題，我們就需要引入 lint-staged

lint-staged 的作用是只對(duì) git add 緩存區(qū)的代碼進(jìn)行 eslint 代碼規(guī)范校驗(yàn)。這樣就避免了全局校驗(yàn)的問(wèn)題。你修改了上面代碼，你就提交了什么代碼，其他代碼不做 eslint 校驗(yàn)。

npm install --save-dev lint-staged

在 package.json 中添加：

"lint-staged": {
    "src/**/*.{css，scss,less}": [
      "npm run lint",
      "git commit"
    ],
    "src/**/*.{js,vue}": [
      "npm run lint",
      "git commit"
    ]
  }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具