前言：
同一個項目，保持代碼風格的一致，是很是重要的一個規範。但事實上項目小組成員的代碼校驗規則、格式化工具一般都不一致，爲了不項目到後期出現沒法維護的問題，項目成員使用同一套校驗規則，同一個格式化方式是至關好的步驟之一。javascript
我的博客瞭解一下：obkoro1.comhtml
保存時自動統一代碼風格：
先經過一些簡單的配置，而後：前端
Ctrl+s/command+s時自動修復代碼的格式錯誤vue自動修復的規則是讀取項目根目錄的Eslint規則java
這樣就能保證項目成員都是一套驗證規則的代碼風格面試
配置：
1.安裝VsCode的`EsLint`和`vetur`插件
如圖安裝EsLint插件：npm
2.爲項目安裝`EsLint`包：
注意要安裝在開發環境上，還有就是若是你使用的是腳手架的話，選了Eslint選項，會自帶這些包。json
3.在項目的根目錄下添加`.eslintrc.js`
用於校驗代碼格式，根據項目狀況，可自行編寫校驗規則：bash
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、一、2的意思：
"off"或 0 - 關閉這項規則"warn"或 1 - 將規則視爲一個警告"error"或 2 - 將規則視爲一個錯誤
結語
使用自動VsCode+EsLint格式化代碼，在團隊內部相互去看別人的代碼的時候，就能夠更容易的看的懂，可以極大的下降團隊的溝通成本和提升心情,設置這麼方便，趕忙在團隊中用起來吧！
但願看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。
我的blog and 前端積累文檔，如需轉載，請放上原文連接並署名。碼字不易，感謝支持！
若是喜歡本文的話，歡迎掃描關注個人訂閱號，最新文章，面試題等都將第一時間發佈在訂閱號上。
以上2018.9.16
本文分享自微信公衆號 - OBKoro1前端進階積累（gh_8af2fb8e54a9）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。