一.eslint

eslint它規(guī)范的是代碼偏向語法層面上的風(fēng)格。本篇文章以一個(gè)基本的vue項(xiàng)目，來說明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)是用來配置vue.js風(fēng)格
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

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

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

"extends": [
    "eslint:recommended",//繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
    "plugin:vue/essential"http:// 此項(xiàng)是用來配置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是打上了對勾（也就是"eslint:recommended"）中生效的規(guī)則，然后我們再在項(xiàng)目中寫個(gè)debugger，然后命令行運(yùn)行檢查eslint的命令，就會報(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"],//語句強(qiáng)制分號結(jié)尾
// "quotes": [2, "double"],//引號類型 ""
//"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,//禁止多余的冒號
//"no-multi-spaces": 1,//不能用多余的空格

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

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

上文中，我們是手動輸入命令行來檢查代碼是否符合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插件自動檢查規(guī)范

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可以看到，我一按保存，就自動修復(fù)了分號的問題。

9.配置eslintignore

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

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

10.總結(jié)

反思幾個(gè)問題：

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

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

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

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

二.prettier

1.prettier的作用

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

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

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

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

也就是說，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, //單行長度
    tabWidth: 2, //縮進(jìn)長度
    useTabs: false, //使用空格代替tab縮進(jìn)
    semi: false, //句末使用分號
    singleQuote: false, //使用單引號
    arrowParens: "avoid",//單參數(shù)箭頭函數(shù)參數(shù)周圍使用圓括號-eg: (x) => xavoid：省略括號
    bracketSpacing: true,//在對象前后添加空格-eg: { foo: bar }
    insertPragma: false,//在已被preitter格式化的文件頂部加上標(biāo)注
    jsxBracketSameLine: false,//多屬性html標(biāo)簽的‘>'折行放置
    rangeStart: 0,
    requirePragma: false,//無需頂部注釋即可格式化
    trailingComma: "none",//多行時(shí)盡可能打印尾隨逗號
    useTabs: false//使用空格代替tab縮進(jìn)
  };

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

沖突的問題稍后再說，這里只是說明我們配置的.prettierrc.js是生效的。

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

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

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

 //prettier可以格式化很多種格式，所以需要在這里對應(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í)候，會啟用默認(rèn)的格式化，這里是prettier
  "editor.formatOnSave": true

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

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

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

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

這個(gè)要怎么實(shí)現(xiàn)呢？可以利用eslint的報(bào)錯(cuò)，把prettier當(dāng)成eslint的插件注入eslint中，讓eslint來報(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í)保存下代碼，除了沖突的部分，都會被自動修復(fù)。

接下來可以著手解決這兩家伙沖突的問題了。

7.解決eslint和prettier的沖突問題

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

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

首先，我們是安裝了eslint。

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

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

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

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

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

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

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

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

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

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

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

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

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)是用來配置vue.js風(fēng)格
    'prettier',//把prettier中設(shè)置的規(guī)則添加進(jìn)來，讓它覆蓋上面設(shè)置的規(guī)則。這樣就不會和上面的規(guī)則沖突了
  ],

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

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

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

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

也就是說，上文解決沖突只會解決extends中的沖突。不會解決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, // 超過最大值換行
  "prettier.tabWidth": 2, // 縮進(jìn)字節(jié)數(shù)
  "prettier.useTabs": false, // 句尾添加分號
  "prettier.singleQuote": false, // 使用單引號代替雙引號
  "prettier.proseWrap": "preserve", //  (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號。avoid：省略括號
  "prettier.bracketSpacing": true, // 在對象，數(shù)組括號與文字之間加空格 "{ 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中使用單引號代替雙引號
  "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", // 在對象或數(shù)組最后一個(gè)元素后面是否加逗號（在ES5中加尾逗號）
  "prettier.tslintIntegration": false,
  "prettier.arrowParens": "avoid"

9.總結(jié)

反思問題：

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

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

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

1.husky

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

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

我們需要安裝一個(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 里面的命令 ： 我們在這里輸出 husky 并且執(zhí)行 npm run lint (我們在上文第一章，第5點(diǎn)加上的驗(yàn)證eslint的命令)

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

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

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

2.lint-staged

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

為了解決這種問題，我們就需要引入 lint-staged

lint-staged 的作用是只對 git add 緩存區(qū)的代碼進(jìn)行 eslint 代碼規(guī)范校驗(yàn)。這樣就避免了全局校驗(yà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è)參考，也希望大家多多支持腳本之家。

最新評論