VsCode讀取專案檔案的Eslint規則 儲存時自動修復格式錯誤

OBKoro1發表於2018-09-19

前言:

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

游泳、健身瞭解一下:部落格前端積累文件公眾號GitHub

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

先通過一些簡單的配置,然後:

  • Ctrl+s / command+s 時自動修復程式碼的格式錯誤
  • 自動修復的規則是讀取專案根目錄的Eslint規則
  • 這樣就能保證專案成員都是一套驗證規則的程式碼風格

配置:

1.安裝VsCode的EsLintvetur外掛

如圖安裝EsLint外掛:

VsCode讀取專案檔案的Eslint規則 儲存時自動修復格式錯誤

2.為專案安裝EsLint包:

VsCode讀取專案檔案的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外掛

大功告成:

點開檔案,你可能會看到如下報錯,無需一個一個去改,只要儲存一下檔案,就可以自動修復這些程式碼格式上的問題了。

VsCode讀取專案檔案的Eslint規則 儲存時自動修復格式錯誤

注意:

如果整個檔案都飄紅的話,不會一次性修改如果的格式問題,會一下改一部分,你可能需要多按幾次儲存。

一鍵修復專案格式問題:

遇到下面這兩種情況:

  • 你剛剛引入這個自動修復,但你專案的檔案比較多,且你又比較懶。
  • 隔一段時間,修復一下程式碼格式上的問題

你可以像下面這樣,在package.json裡面的scripts裡面新增一條如下命令:

"lint": "eslint --ext .js,.vue src --fix"
複製程式碼

VsCode讀取專案檔案的Eslint規則 儲存時自動修復格式錯誤

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

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

部落格前端積累文件公眾號GitHub

以上2018.9.16

相關文章