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、一、2的意思：

• "off" 或 0 - 關閉這項規則
• "warn" 或 1 - 將規則視爲一個警告
• "error" 或 2 - 將規則視爲一個錯誤

---

結語

使用自動VsCode+EsLint格式化代碼，在團隊內部相互去看別人的代碼的時候，就能夠更容易的看的懂，可以極大的下降團隊的溝通成本和提升心情,設置這麼方便，趕忙在團隊中用起來吧！

但願看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。

我的blog and 前端積累文檔，如需轉載，請放上原文連接並署名。碼字不易，感謝支持！

若是喜歡本文的話，歡迎掃描關注個人訂閱號，最新文章，面試題等都將第一時間發佈在訂閱號上。

以上2018.9.16