前言：
同一個專案，保持程式碼風格的一致，是非常重要的一個規範。但事實上專案小組成員的程式碼校驗規則、格式化工具通常都不一致，為了避免專案到後期出現無法維護的問題，專案成員使用同一套校驗規則，同一個格式化方式是相當好的步驟之一。
儲存時自動統一程式碼風格：
先通過一些簡單的配置，然後：
Ctrl+s/command+s時自動修復程式碼的格式錯誤- 自動修復的規則是讀取專案根目錄的Eslint規則
- 這樣就能保證專案成員都是一套驗證規則的程式碼風格
配置：
1.安裝VsCode的EsLint和vetur外掛
如圖安裝EsLint外掛：
2.為專案安裝EsLint包：
注意要安裝在開發環境上，還有就是如果你使用的是腳手架的話，選了Eslint選項，會自帶這些包。
3.在專案的根目錄下新增.eslintrc.js
用於校驗程式碼格式，根據專案情況，可自行編寫校驗規則：
module.exports = {
// Eslint規則
}
複製程式碼4.首選項設定：
將下面這部分放入首選項設定中：
"eslint.autoFixOnSave": true, // 啟用儲存時自動修復,預設只支援.js檔案
"eslint.validate": [
"javascript", // 用eslint的規則檢測js檔案
{
"language": "vue", // 檢測vue檔案
"autoFix": true // 為vue檔案開啟儲存自動修復的功能
},
{
"language": "html",
"autoFix": true
},
],
複製程式碼想了解更多的話，推薦看一下VsCode的EsLint外掛
大功告成：
點開檔案，你可能會看到如下報錯，無需一個一個去改，只要儲存一下檔案，就可以自動修復這些程式碼格式上的問題了。
注意：
如果整個檔案都飄紅的話，不會一次性修改如果的格式問題，會一下改一部分，你可能需要多按幾次儲存。
一鍵修復專案格式問題：
遇到下面這兩種情況：
- 你剛剛引入這個自動修復，但你專案的檔案比較多，且你又比較懶。
- 隔一段時間，修復一下程式碼格式上的問題
你可以像下面這樣，在package.json裡面的scripts裡面新增一條如下命令：
"lint": "eslint --ext .js,.vue src --fix"
複製程式碼
--ext後面跟上的.js、.vue是你要檢測檔案的字尾，.vue後面的src是要檢測的哪個目錄下面的檔案。
--fix的作用是自動修復根據你配置的規則檢測出來的格式問題
一鍵修復:
輸入如下命令列，就可以自動修復你src資料夾下面的所有根據你配置的規則檢測出來的格式問題。
npm run lint
複製程式碼.eslintignore 不檢測一些檔案：
在專案的根目錄建立一個.eslintignore檔案，用於讓EsLint不檢測一些檔案。
比如引的一些別人的檔案，外掛等,比如檔案中：
src/test/*
src/test2/*
複製程式碼檔案中的內容像上面這樣寫，這裡第一行是不檢測src目錄下的test資料夾下面的所有檔案。
自定義規則：
// .eslintrc.js檔案
module.exports = {
"rules": { // 自定義規則
"no-console": 0,
"no-const-assign": 1,
"no-extra-bind": 2,
}
}
複製程式碼0、1、2的意思：
"off"或 0 - 關閉這項規則"warn"或 1 - 將規則視為一個警告"error"或 2 - 將規則視為一個錯誤
結語
使用自動VsCode+EsLint格式化程式碼，在團隊內部相互去看別人的程式碼的時候，就可以更容易的看的懂，能夠極大的降低團隊的溝通成本和提高心情,設定這麼方便，趕緊在團隊中用起來吧！
希望看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。
以上2018.9.16