💡 前言

在團隊開發或個人專案中，程式碼排版不統一（例如：有人用 2 個空格縮排，有人用 4 個；有的地方加分號，有的地方不加）常常會導致程式碼閱讀困難，甚至在 Git Commit 比對時出現一大堆無意義的排版變更。

今天 Day 09 我們要來設定前端與多語言開發者必備的排版神器——Prettier，並開啟 存檔自動格式化，讓你從此不用再手動對齊程式碼！

🎯 本篇重點

1. 安裝 Prettier - Code formatter 擴充套件
2. **將 Prettier 設定為預設格式化工具 **
3. **開啟存檔自動排版 **
4. 專案客製化排版規則：.prettierrc 檔建立與設定

🛠️ 1. 安裝與設定 Prettier

Step 1：安裝套件

開啟 VS Code 擴充套件商店（快捷鍵 Ctrl + Shift + X），搜尋 Prettier - Code formatter 並點擊安裝。

Step 2：將 Prettier 設為預設格式化工具

1. 按下 Ctrl + , 開啟設定。
2. 搜尋 Default Formatter。
3. 在下拉選單中選擇 Prettier - Code formatter (esbenp.prettier-vscode)。

Step 3：開啟存檔自動格式化

1. 在設定中搜尋 Format on Save。
2. 勾選 Editor: Format On Save。

✨ 效果：之後只要按下 Ctrl + S（Mac 為 Cmd + S）存檔，VS Code 就會瞬間幫你把縮排、括號與空格排得工工整整！

⚙️ 2. 直接透過 settings.json 完成設定

如果你喜歡直接編輯 JSON，按下 F1 輸入 Open User Settings (JSON)，將以下設定加入設定檔中：

{
  // 預設格式化工具設定為 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // 開啟存檔時自動格式化
  "editor.formatOnSave": true,
  
  // 針對特定語言個別指定格式化工具（範例）
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

📄 **3. 專案專屬排版規則：.prettierrc**

在團隊專案中，為了讓每位成員的排版風格完全一致，我們可以在專案根目錄建立一個名為 .prettierrc 的設定檔（JSON 格式）：

{
  "semi": true,             // 句尾自動加上分號
  "singleQuote": true,      // 優先使用單引號 ('') 而非雙引號 ("")
  "tabWidth": 2,            // 縮排使用 2 個空格
  "trailingComma": "es5",   // 在 ES5 相容的地方自動加上物件/陣列尾隨逗號
  "printWidth": 80,         // 單行程式碼超過 80 個字元自動換行
  "bracketSpacing": true    // 物件大括號內側加上空格，如 { foo: bar }
}