問題

工作場景中，由于項目越來越大，參與人員越來越多，通過成員約定或Code Review的形式來保障代碼規范的方式也會因為需要耗費較多的精力和工作時間，導致項目規范的執行變得越來越難以落地。

除此之外，從社區眾多的代碼規范風格中，挑選出一套適合團隊所有人的，也需要耗費大量時間及習慣成本。把本就寶貴的開發時間以及成長時間，浪費在這些邊角的事情上實在是覺得不值。

解決方案

所以，建立一套自動化的代碼風格檢查及格式化工具，節省團隊成員精力，就變得更有意義和價值。讓所有人都更關注代碼和邏輯本身，讓程序員去做有價值的事情，這正是Prettier這個工具本身所努力的方向。也與我們的開發體驗上需求相契合。

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

基于此，我們引入Vue + Vetur + ESlint + Prettier | ESlint + Prettier 方案作為 Vue 項目和 JS-SDK 項目的代碼風格審查及自動格式化方案。簡單的思路就是通過 Vetur 來做 Vue 代碼風格的檢查比如template，style，Vetur 搭配 Eslint 檢測 js 部分的代碼風格， 調用 Prettier 進行代碼風格的修正統一。

熟悉 Vscode 和 Eslint、 Prettier 的小伙伴可能知道 Vscode 的插件市場有這兩個工具的插件。而且 npm 平臺上 也有二者對應的工具包，到底選哪種好？很簡單，對比一下：

npm 形式安裝的工具包，都需要手動通過 npm run 對應的 npm-script 命令來執行

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

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

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

更新項目，并重新執行npm i

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

打開項目的設置： Ctrl + , (Mac : Cmd + ,) ，選擇工作區設置,打開 setting.json 文件，把下面插件相關的配置拷貝入文件，并保存

{"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,}

項目中新增了 .eslintrc.js 文件，可以聯合 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"}};