💡 前言

在前幾天的文章中，我們學會了透過 settings.json 設定全域的格式化工具、自動修復與程式碼檢查。然而，當你同時參與多個不同的專案時，經常會遇到這樣的矛盾：
• 專案 A 規定 JavaScript 縮排必須是 2 個空格，且必須使用單引號。
• 專案 B（例如舊系統維護）規定縮排必須是 4 個空格，且允許雙引號。
• 專案 C 需要一組完全不同的 Python 解釋器與 Lint 規則。

如果把這些規則全部寫死在全域的 User Settings 裡，每次切換專案就要手動修改設定，不僅繁瑣還容易搞混。今天 Day 23 我們要來解鎖 VS Code 的強大隔離機制——Workspace Settings（工作區設定與推薦擴充套件），讓每個專案都能擁有獨立的專屬配置！

🎯 本篇重點

1. User Settings（全域）vs Workspace Settings（工作區）的差異
2. **如何在專案中建立 .vscode/settings.json**
3. 專案擴充套件推薦：.vscode/extensions.json 的妙用
4. 將專案設定納入 Git 版控，實現團隊環境一致性

🏢 1. 認識設定的優先級：全域 vs 工作區

VS Code 的設定層級主要分為三種（覆蓋順序由低到高）：

1. Default Settings（預設設定）：VS Code 內建的初始出廠設定。
2. User Settings（全域設定）：你的個人偏好設定（儲存在本機電腦的使用者目錄中），適用於你打開的所有專案。
3. Workspace Settings（工作區設定）：當前專案專屬的設定。只要放在專案根目錄下的 .vscode/settings.json 裡，它就會覆蓋全域設定。當你關閉這個專案、打開另一個專案時，設定就會自動切換！

🛠️ **2. 建立專案專屬的 settings.json**

步驟 A：手動或透過介面建立

1. 在專案根目錄下建立一個名為 .vscode 的資料夾（如果沒有的話）。
2. 在該資料夾內建立一個名為 settings.json 的檔案。
3. 根據該專案的需求寫入自訂規則。

實用專案設定範例 (.vscode/settings.json)：

{
  // 覆蓋全域設定：此專案強制使用 4 個空格縮排
  "editor.tabSize": 4,
  "editor.insertSpaces": true,

  // 針對此專案指定特定的 Prettier 設定檔
  "prettier.requireConfig": true,

  // 關閉全域的某些干擾性提示，僅保留此專案需要的檢查
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // 排除在檔案總管中不想看到的暫存資料夾
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/tmp": true
  }
}

🔌 3. 團隊利器：.vscode/extensions.json（推薦擴充套件）

除了設定外，當新成員加入專案時，你一定希望他們能自動安裝該專案必須的套件（例如 ESLint、Prettier、Tailwind CSS IntelliSense），而不是一個一個慢慢找。

在 .vscode 資料夾中建立一個名為 extensions.json 的檔案：

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-python.python",
    "bradlc.vscode-tailwindcss"
  ]
}

✨ 效果：當其他夥伴用 VS Code 打開這個專案時，右下角會自動彈出通知詢問：「This workspace has extension recommendations. Would you like to view them?」，夥伴只要點擊一鍵安裝，就能瞬間備齊專案所需的所有開發工具！

📦 4. 納入 Git 版控與 .gitignore 的拿捏

• 應該加入 Git 版控的檔案：
.vscode/settings.json（專案共用的排版與行為規則）
.vscode/extensions.json（團隊推薦套件清單）
• 不應該加入 Git 版控的檔案：
個人專屬的除錯配置（如 .vscode/launch.json 裡面包含你本機獨有的絕對路徑或敏感參數），可以將其加入 .gitignore 中避免污染共用倉庫。