VsCode讀取專案檔案的Eslint規則 儲存時自動修復格式錯誤
同一個專案，保持程式碼風格的一致，是非常重要的一個規範。但事實上專案小組成員的程式碼校驗規則、格式化工具通常都不一致，為了避免專案到後期出現無法維護的問題，專案成員使用同一套校驗規則，同一個格式化方式是相當好的步驟之一。
個人部落格瞭解一下：obkoro1.com
儲存時自動統一程式碼風格：
先通過一些簡單的配置，然後：
-
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" "warn" "error"
結語
使用自動VsCode+EsLint格式化程式碼，在團隊內部相互去看別人的程式碼的時候，就可以更容易的看的懂，能夠極大的降低團隊的溝通成本和提高心情,設定這麼方便，趕緊在團隊中用起來吧！
希望看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。
ofollow,noindex">個人blog and 前端積累文件 ，如需轉載，請放上原文連結並署名。碼字不易， 感謝 支援！
如果喜歡本文的話，歡迎掃描關注我的訂閱號，最新文章，面試題等都將第一時間釋出在訂閱號上。
以上2018.9.16