VSCode 自動修正 ESLint 錯誤

前言

這篇稍微寫一下如何使用 VSCode 做到自動修正 ESLint 警告與錯誤，其中也包含格式化的方式。

先寫在前面

Note
ESLint 後來決定移除格式化程式碼的功能，因此 ESLint 未來應該就不會與 Prettier 衝突，這邊我也先準備好一篇 Prettier 教學文章 你終究要用 Prettier，為什麼不一開始就用「Prettier」呢？，但這邊底下文章我就不額外調整了，因為有些舊有專案可能會適用。

這句話先寫在前面，如果自己對於 JavaScript 的掌握度不夠高，或者是新手 JavaScript 工程師，那麼我會強烈建議你先不要使用這個功能，因為當你還沒有掌握好如何排除錯誤時，過度仰賴工具是會導致自己的基礎更不扎實，也會導致自己將來若發生 VSCode 無法自動修正時自己會無法解決問題。

因此此功能比較適合以下人種(??)：

• 已經有一定基本功力的人，但想透過 ESLint 學習 JavaScript 的人
• 想透過 ESLint 規範自己程式碼風格的人

如果你是上述兩者其中一個，那麼就會非常適合開啟這個功能唷。

存檔自動修正 ESLint

這邊先講講如何在存檔時就順便修正 ESLint 錯誤，當然這個的方式主要有兩種模式，所以讓我們一個一個了解吧。

Global VSCode Setting

首先第一種是最簡單的，也就是整體 VSCode 都開啟 ESLint 自動修正，只要你按下存檔快捷鍵就會自動修正：

• Windows
  • CTRL + S
• Mac
  • command + S

首先先點找到齒輪 -> 設定

如果你找不到的話可以按下 VSCode 另一種快捷鍵叫出設定：

• Windows
  • CTRL + , (注音符號：ㄝ 的按鍵，在 M 旁邊)
• Mac
  • control + option + command + , (注音符號：ㄝ 的按鍵，在 M 旁邊)

接下來點一下上方的開啟設定(JSON)

基本上你就會看到 JSON 格式

在這個 JSON 中貼入以下設定進去就可以了

1
2
3
4

// 儲存自動修正 ESLint
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
},

接下來你就可以到有滿滿錯誤的專案按下存檔，這時候就會看到自動修正了

Project VSCode Setting

那麼有些狀況我們並不希望整台電腦都可以做到存檔就修正全部錯誤，可能我們只是希望特定專案有這個效果而已，因此這邊可以專案底下建立一個 .vscode 資料夾

這個資料夾主要是針對當前專案設置的 VSCode 設定檔案，概念就跟 VSCode 的 Global Setting 一樣，只是變成了 Project Setting 形式。

接下來在這個資料夾下建立一個 settings.json 檔案(注意是 settings.json 不是 setting.json)

建立完畢後，內容填入以下：

1
2
3

{
  "eslint.autoFixOnSave": true,//儲存時自動執行 ESLint 格式化
}

這樣子就可以達到與 Global Setting 一樣的存檔自動修正效果

格式化時修正 ESLint

最後一種則是使用自動格式化(Format Document) 的方式，通常來講我們很常會使用 VSCode 提供的自動格式化

• Window
  • Shift + ALT + F
• Mac
  • Command + Option + F

但是內建 VSCode 是使用 Prettier 風格去排版，所以就會跟 ESLint 發生衝突，相信滿多人應該都會安裝這個套件「Prettier - Code formatter」，某一版 VSCode 就會默認安裝這個套件(似乎，但是我沒有被預設安裝，所以沒遇到過)，但是這個套件風格就與前面所講的一樣，會跟 ESLint 風格衝突

那麼這邊提供幾種解法

• 使用上面的存檔時自動修正
• 安裝另一套格式化套件叫做「Prettier ESLint」

安裝好後，如果你是第一次安裝使用的話，當你按下格式化快捷鍵時會出現該視窗

這時候按下設定會跳出你要使用的格式化風格，這邊就選擇 Prettier ESLint

這樣就可以解決 Prettier 與 ESLint 衝突問題了

如果你發現無法跳出格式化設置時，一樣到 VSCode Setting JSON 中找到以下

1
2
3
4
5

{
  "[javascript]": {
    "editor.defaultFormatter": "...."
  },
}

然後將它改成以下就正常了

1
2
3
4
5

{
  "[javascript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
}

因為有些人預設是走 VSCode TS 風格，所以可能會出不來

1
2
3
4
5

{
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
}

補充

那麼你可能會好奇這兩種自動化修正的差異在哪裡，主要差異是這兩者

• 存檔時修正 Save Auto Fix ESlint
• 格式化時順便修正 Format Document Auto Fix ESlint

簡單來講是一個在存檔時就順便修正 ESLint 錯誤，所以很仰賴 ESLint 警告，如果沒有出現 ESLint 就不會存檔修正，而格式化的方式則是在格式化時同時修正成符合 ESLint 的風格。

所以你說哪一種比較好呢？基本上挑選一個適合你就可以了。