前言：

同一個專案，保持程式碼風格的一致，是非常重要的一個規範。但事實上專案小組成員的程式碼校驗規則、格式化工具通常都不一致，為了避免專案到後期出現無法維護的問題，專案成員使用同一套校驗規則，同一個格式化方式是相當好的步驟之一。

儲存時自動統一程式碼風格：

先通過一些簡單的配置，然後：

• 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格式化程式碼，在團隊內部相互去看別人的程式碼的時候，就可以更容易的看的懂，能夠極大的降低團隊的溝通成本和提高心情,設定這麼方便，趕緊在團隊中用起來吧！

希望看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。

and ，如需轉載，請放上原文連結並署名。碼字不易，感謝支援！

如果喜歡本文的話，歡迎掃描關注我的訂閱號，最新文章，面試題等都將第一時間釋出在訂閱號上。

以上2018.9.16