使用 VSCode ESLint 進行自動排版，讓coding排版變統一

Table of Contents

當你在開發中遇到不統一的程式碼排版時，使用 VSCode ESLint 工具可以大大提高效率並確保程式碼的一致性。想了解更多前端開發相關基礎與規範細節，亦可參考 React Console Warning：images jsx-a11y/alt-text 警告原因、解決方法與 img alt 設定規範與 JS 中的 URL 編碼(encode)與解碼(decode)方法。下面我將向你介紹如何使用 VSCode 和 ESLint 來自動排版你的程式碼。

首先，確保你已經在你的專案中安裝了 ESLint。如果還未安裝，可以使用以下指令在終端機中安裝：

npm install eslint --save-dev

接下來，在 Visual Studio Code 中安裝 ESLint 擴充套件。打開 VSCode，點擊側邊欄中的擴充套件圖示，搜尋 “ESLint” 並安裝它，這裡 ESLint 使用 v2.4.2版。

安裝完成後，你需要為你的專案設置 ESLint。首先，在你的專案根目錄中創建一個名為 “.eslintrc” 的檔案。可以使用以下指令來創建：

touch .eslintrc

接下來，在 “.eslintrc” 檔案中輸入以下內容，定義你的程式碼排版規則：

{
  "extends": "eslint:recommended",
  "rules": {
    // 在這裡定義你的排版規則
  }
}

這只是一個示例，你可以根據自己的需求定義更多的規則。你可以在 ESLint 的官方文件中找到更多可用的規則和配置選項。

當你定義完規則後，保存並關閉 “.eslintrc” 檔案。回到 VSCode，打開你想要排版的程式碼檔案。

在 VSCode 中，按下 “Ctrl + ,”叫出 VSCode 設定畫面

在點選左上角小icon”開啟設定”

開啟 setting.json，在JSON格式中將以下設定加入：

{
    /* 目前 VSCode 設定，無須更動，沒有可以忽略.... */
    
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
}

完成後存檔，設定到這邊就完成了。

現在，回到你要自動排版的檔案中，按下 “Ctrl + S” 將檔案存檔，就可以看到 ESLint 依據規則動排版程式碼了。

實務踩坑與常見排錯

在實際導入與設定 VSCode 自動排版的過程中，開發者經常會遇到工具衝突或存檔無反應的狀況。以下整理出兩個最常見的實務踩坑情境與對應解法，幫助你快速排除障礙：

踩坑情境與觸發原因：當開發者在 VSCode 同時安裝了 ESLint 與 Prettier 擴充套件，存檔時常會發生「ESLint 修正了一次排版，Prettier 馬上又覆蓋回來（無限循環或互相打架）」的詭異現象。
解決方法：必須在 setting.json 明確指定預設格式化工具，並將自動修復指派給 ESLint。建議於 setting.json 確保加入以下設定避免套件互相干擾：

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

踩坑情境與觸發原因：依照教學設定了 "editor.codeActionsOnSave": { "source.fixAll": true }，但按下 Ctrl + S 卻毫無反應，終端機也無報錯。
解決方法：在現代 VSCode 版本中，建議將通用設定更精準指向 ESLint 的修復動作，避免全域 source.fixAll 覆蓋其他套件。請將 setting.json 調整為：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

同時請檢查 VSCode 右下角狀態列是否有出現 ESLint 的打勾圖示，若顯示 x 代表專案根目錄找不到 .eslintrc 或設定檔語法有誤。

確保在開發過程中遵循統一的程式碼排版規則，將幫助你的團隊協作更加順暢並提高程式碼的品質。祝你順利！