Day 06：【工作區設定】settings.json 詳解：全域設定 vs 工作區 (Workspace) 獨立設定

💡 前言

在前幾天的文章中，我們多次透過 Graphical User Interface (GUI) 視窗與快捷鍵修改了 VS Code 的外觀和設定。然而，VS Code 所有設定的核心靈魂，其實都儲存在 settings.json 這個 JSON 格式的設定檔中。

理解 settings.json 的運作機制，不僅能讓你以最快速度完成跨電腦設定複製，還能解決一個常見的開發痛點：如何讓不同的專案（例如：Python 專案與 Node.js 專案）擁有各自獨立的設定，而不互相干擾？ 今天 Day 06 我們就來深入拆解全域設定與工作區設定！

🎯 本篇重點

1. 使用者設定 vs 工作區設定的差異與優先權
2. **如何快速開啟與編輯 settings.json**
3. 專案專屬設定：.vscode/settings.json 實戰
4. 實用的全域 settings.json 常用配置範例

⚖️ 1. 全域設定 vs 工作區設定：層級與優先權

VS Code 的設定主要分為兩個層級：

• 使用者設定 (User Settings / 全域設定)：
套用到你這台電腦上開啟的所有專案與資料夾。例如：字型、主題配色、Settings Sync 雲端同步內容。
• 工作區設定 (Workspace Settings / 專案設定)：
僅套用到當前專案資料夾。這些設定會儲存在專案根目錄下的 .vscode/settings.json 檔案中。

🔥 核心規則 (Override Rule)：
工作區設定的優先權高於使用者設定！
當兩者出現相同的設定項目時，VS Code 會優先採用工作區設定。這意味著你可以為全域設定一套通用主題，但針對特定專案微調 Tab 縮排格數或程式碼排版規則。

🛠️ **2. 如何開啟與編輯 settings.json**

開啟全域使用者設定 (User Settings JSON)：

1. 按下快捷鍵 F1 或 Ctrl + Shift + P（Mac 為 Cmd + Shift + P）開啟命令面板 (Command Palette)。
2. 輸入並選擇 Preferences: Open User Settings (JSON)。

開啟工作區專案設定 (Workspace Settings JSON)：

1. 同樣開啟命令面板。
2. 輸入並選擇 Preferences: Open Workspace Settings (JSON)。
3. VS Code 會自動在專案根目錄建立 .vscode/settings.json。

📁 3. 專案專屬設定：.vscode/settings.json 實務應用

在團隊開發或多語言專案中，.vscode/settings.json 非常實用。你可以將這個檔案 commit 進 Git 版本控制，確保團隊中的每一位成員開啟專案時都使用統一的開發規範。

常見應用場景範例：

{
  // 針對此專案強制使用 2 個空白作為縮排（例如：前端 React/Vue 專案）
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  
  // 存檔時自動刪除行尾多餘的空白
  "files.trimTrailingWhitespace": true,
  
  // 排除特定資料夾不顯示在搜尋結果中
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

⚙️ 4. 實用全域 settings.json 精選範例

以下提供一份經過整理、適合大部分開發者的全域 settings.json 基礎配置，可直接複製並加入你的 User JSON 中：

{
  // 介面與字型優化
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontSize": 15,
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,

  // 程式碼編輯體驗
  "editor.tabSize": 4,
  "editor.wordWrap": "on",               // 長行自動換行，避免出現橫向滾動條
  "editor.cursorBlinking": "smooth",     // 流暢的光標閃爍效果
  "editor.smoothScrolling": true,        // 啟用平滑滾動效果
  "editor.bracketPairColorization.enabled": true, // 彩色括號配對高亮

  // 檔案與存檔行為
  "files.autoSave": "afterDelay",        // 自動存檔（可選：off, afterDelay, onFocusChange）
  "files.autoSaveDelay": 1000,           // 延遲 1 秒自動存檔
  "editor.formatOnSave": true            // 存檔時自動格式化程式碼
}