問(wèn)題

工作場(chǎng)景中，由于項(xiàng)目越來(lái)越大，參與人員越來(lái)越多，通過(guò)成員約定或Code Review的形式來(lái)保障代碼規(guī)范的方式也會(huì)因?yàn)樾枰馁M(fèi)較多的精力和工作時(shí)間，導(dǎo)致項(xiàng)目規(guī)范的執(zhí)行變得越來(lái)越難以落地。

除此之外，從社區(qū)眾多的代碼規(guī)范風(fēng)格中，挑選出一套適合團(tuán)隊(duì)所有人的，也需要耗費(fèi)大量時(shí)間及習(xí)慣成本。把本就寶貴的開(kāi)發(fā)時(shí)間以及成長(zhǎng)時(shí)間，浪費(fèi)在這些邊角的事情上實(shí)在是覺(jué)得不值。

解決方案

所以，建立一套自動(dòng)化的代碼風(fēng)格檢查及格式化工具，節(jié)省團(tuán)隊(duì)成員精力，就變得更有意義和價(jià)值。讓所有人都更關(guān)注代碼和邏輯本身，讓程序員去做有價(jià)值的事情，這正是Prettier這個(gè)工具本身所努力的方向。也與我們的開(kāi)發(fā)體驗(yàn)上需求相契合。

想必大家都已對(duì) Eslint 有所了解，但對(duì) Prettier 相對(duì)陌生些。簡(jiǎn)單來(lái)說(shuō)，Eslint 負(fù)責(zé)代碼風(fēng)格的檢查，可以自定義較多的復(fù)雜檢查規(guī)則，給出警告或報(bào)錯(cuò)，同時(shí)具有一部分幫助你糾正代碼風(fēng)格的能力（eslint --fix）；Prettier 更加簡(jiǎn)單粗暴，直接掃描文件本身的 AST(抽象語(yǔ)法樹(shù)),然后按照自己的格式化風(fēng)格重新修改文件，也就是幫你進(jìn)行完全的代碼格式化，配置項(xiàng)簡(jiǎn)單，只要遵從它的風(fēng)格就OK了。

基于此，我們引入Vue + Vetur + ESlint + Prettier | ESlint + Prettier 方案作為 Vue 項(xiàng)目和 JS-SDK 項(xiàng)目的代碼風(fēng)格審查及自動(dòng)格式化方案。簡(jiǎn)單的思路就是通過(guò) Vetur 來(lái)做 Vue 代碼風(fēng)格的檢查比如template，style，Vetur 搭配 Eslint 檢測(cè) js 部分的代碼風(fēng)格， 調(diào)用 Prettier 進(jìn)行代碼風(fēng)格的修正統(tǒng)一。

熟悉 Vscode 和 Eslint、 Prettier 的小伙伴可能知道 Vscode 的插件市場(chǎng)有這兩個(gè)工具的插件。而且 npm 平臺(tái)上 也有二者對(duì)應(yīng)的工具包，到底選哪種好？很簡(jiǎn)單，對(duì)比一下：

npm 形式安裝的工具包，都需要手動(dòng)通過(guò) npm run 對(duì)應(yīng)的 npm-script 命令來(lái)執(zhí)行

Vscode 插件可以結(jié)合編輯器本身，展示更友好、及時(shí)的錯(cuò)誤提醒，保存即可格式化。

雖然，npm包工具結(jié)合 webpack 或者 gulp 這些工具也能達(dá)到保存即可格式化的效果，但還需要引入更多工具和設(shè)置，更費(fèi)周張。那，第二種方式就成為了我們的首選方案了。

給出 Vscode 編輯器下的配置方案：

更新項(xiàng)目，并重新執(zhí)行npm i

安裝 Vscode 插件： editorconfig, Vetur, Eslint, Prettier

打開(kāi)項(xiàng)目的設(shè)置： Ctrl + , (Mac : Cmd + ,) ，選擇工作區(qū)設(shè)置,打開(kāi) setting.json 文件，把下面插件相關(guān)的配置拷貝入文件，并保存

{"eslint.validate": [{"language":"html","autoFix":true},? ? {"language":"vue","autoFix":true},? ? {"language":"javascript","autoFix":true},? ? {"language":"javascriptreact","autoFix":true}? ],"editor.formatOnSave":false,"eslint.autoFixOnSave":true,"vetur.validation.template":false,}

項(xiàng)目中新增了 .eslintrc.js 文件，可以聯(lián)合 Eslint 和 Prettier 的使用

module.exports = {root:true,env: {node:true},extends: ["plugin:vue/recommended","eslint:recommended","plugin:prettier/recommended","prettier/vue"],rules: {"no-console": process.env.NODE_ENV ==="production"?"error":"off","no-debugger": process.env.NODE_ENV ==="production"?"error":"off","no-unused-vars":"off",// "no-extra-semi": "error",// "semi": ["error", "never"],"no-redeclare":"off","no-empty":"off","no-undef":"off","no-case-declarations":"off","vue/no-use-v-if-with-v-for":"off","vue/no-unused-components":"off",? },parserOptions: {parser:"babel-eslint"}};