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

當你在開發中遇到不統一的程式碼排版時，使用工具可以大大提高效率並確保程式碼的一致性。下面我將向你介紹如何使用 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 依據規則動排版程式碼了。

結語

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