完整的 VS Code 開發環境設定與實戰指南 涵蓋前端 (Vue 3 + TypeScript) 與後端 (Spring Boot) 開發，適用於團隊協作與企業級專案開發 文件範圍與適用對象 ：本手冊面向前後端開發人員、平台／DevOps 工程師與 IT 治理團隊，內容涵蓋 VS Code 從安裝設定、日常開發、AI Agent 輔助開發，到團隊協作、企業級治理與部署維運的完整生命週期。文件依據 code.visualstudio.com/docs 官方文件系列查證撰寫，對應版本為 VS Code v1.134 （2026 年 8 月）；由於 GitHub Copilot／Agent 相關功能迭代速度遠快於核心編輯器（約每月釋出新版），第 3.6 節與第 6.9 節內容請視為該時間點的快照，正式導入前建議對照官方 Release Notes 複核最新異動。 1. VS Code 安裝與環境設定 # 1.3 專案必要的 Extensions 清單 1.3.1 基礎開發工具 1.3.2 前端開發 1.3.3 後端開發 1.3.4 Python 開發 1.3.5 AI 輔助開發 1.3.6 一鍵安裝指令 1.3.4 Python 開發 2.3 編碼規範設定 2.3.1 前端編碼規範 (ESLint + Prettier) 2.3.2 後端編碼規範 (Checkstyle) 2.3.3 Maven 獨立安裝設定 2.3.1 前端編碼規範 (ESLint + Prettier) 2.3.2 後端編碼規範 (Checkstyle) 2.3.3 Maven 獨立安裝設定 2.4 容器化開發環境 (Dev Containers) 3.1 Git 與 GitHub/GitLab 整合 3.5 程式碼片段 (Snippets) 使用 3.6 AI 輔助開發 — GitHub Copilot 3.6.1 程式碼自動完成與 Next Edit Suggestions 3.6.2 Copilot Chat 對話式助手 3.6.3 Inline Chat（行內聊天） 3.6.4 智慧動作 3.6.5 Agent 模式與工作階段 (Sessions) 3.6.6 權限與核准控制（含 Autopilot） 3.6.7 Plan Agent（計畫代理） 3.6.8 自訂指示檔 3.6.9 MCP 伺服器整合 3.6.10 Custom Agents（自訂代理） 3.6.11 Agent Skills（代理技能） 3.6.12 Prompt Files（提示檔案） 3.6.13 Hooks（生命週期鉤子） 3.6.14 語言模型選擇 3.6.15 Agent Plugins（代理外掛） 3.6.1 程式碼自動完成與 Next Edit Suggestions 3.6.2 Copilot Chat 對話式助手 3.6.3 Inline Chat（行內聊天） 3.6.5 Agent 模式與工作階段 (Sessions) 3.6.6 權限與核准控制（含 Autopilot） 3.6.7 Plan Agent（計畫代理） 3.6.9 MCP 伺服器整合 3.6.10 Custom Agents（自訂代理） 3.6.11 Agent Skills（代理技能） 3.6.12 Prompt Files（提示檔案） 3.6.13 Hooks（生命週期鉤子） 3.6.15 Agent Plugins（代理外掛） 4. 專案特定開發流程指引 # 4.7 Python 開發環境設定 4.7.1 Python 專案結構 4.7.2 Python 環境設定 4.7.3 Python 開發工具設定 4.7.4 Python 偵錯設定 4.7.5 Python 任務設定 4.7.6 Python 專案範例 4.7.7 Python 開發最佳實務 4.7.1 Python 專案結構 4.7.2 Python 環境設定 4.7.3 Python 開發工具設定 4.7.4 Python 偵錯設定 4.7.5 Python 任務設定 4.7.6 Python 專案範例 4.7.7 Python 開發最佳實務 5.1 Live Share 即時協作 5.3 程式碼審查工具 5.3.1 GitHub Pull Request 整合 5.3.2 GitLab Merge Request 整合 5.3.3 程式碼審查檢查清單 5.3.1 GitHub Pull Request 整合 5.3.2 GitLab Merge Request 整合 5.3.3 程式碼審查檢查清單 6.3 工作流程自動化 6.3.1 Task 自動化 6.3.2 GitHub Actions 整合 6.3.3 GitLab CI/CD 整合 6.3.2 GitHub Actions 整合 6.3.3 GitLab CI/CD 整合 6.7 設定檔 (Profiles) 管理 6.8 Agent Customizations 編輯器 6.9 企業級管理與治理原則 (Enterprise Policies) 7.1 常見問題 (FAQ) 與解決方式 8.1 新進成員快速上手檢查清單 1. VS Code 安裝與環境設定 # 前往 Visual Studio Code 官方網站 點擊 “Download for Windows” 下載安裝檔 執行安裝檔，建議勾選以下選項： ✅ 新增至 PATH (在重新啟動後可用) ✅ 在檔案總管中的檔案上顯示「使用 Code 開啟」動作 ✅ 在檔案總管中的目錄上顯示「使用 Code 開啟」動作 ✅ 將 Code 註冊為支援的檔案類型的編輯器 ✅ 新增至 PATH (在重新啟動後可用) ✅ 在檔案總管中的檔案上顯示「使用 Code 開啟」動作 ✅ 在檔案總管中的目錄上顯示「使用 Code 開啟」動作 ✅ 將 Code 註冊為支援的檔案類型的編輯器 登入 Microsoft 帳戶（可選，用於同步設定） JetBrains Mono - 專為程式設計設計，支援連字符 Fira Code - 支援程式設計連字符，提升程式碼可讀性 Cascadia Code - Microsoft 開發的程式設計字型 下載字型檔案（.ttf 或 .otf） 右鍵點擊字型檔案 → 選擇「安裝」 在 VS Code 中設定字型 One Dark Pro - 基於 Atom 的流行暗色主題 Material Theme - Google Material Design 風格 Dracula Official - 高對比度暗色主題 Light+ (default light) - VS Code 預設亮色主題 Material Theme Lighter - Material Design 亮色版本 社群趨勢（非官方推薦，僅供參考） ：截至 2026 年，Marketplace 安裝數最高的主題為 GitHub Themes 與 One Dark Pro ； Catppuccin 、 Tokyo Night 則是近期成長最快的社群主題。字型方面， Fira Code （連字符支援最廣泛）、 JetBrains Mono （多字重、護眼設計）與 Cascadia Code （Windows Terminal／Visual Studio 內建，Windows 環境零安裝門檻）皆為社群常見選擇，可依團隊喜好調整，非強制規範。 按 Ctrl + Shift + X 開啟擴充功能面板 按 Ctrl + K, Ctrl + T 選擇主題 1.3 專案必要的 Extensions 清單 # 1.3.2 前端開發 (Vue 3 + TypeScript) # 1.3.3 後端開發 (Java + Spring Boot) # 1.3.4 Python 開發 # 1.3.5 AI 輔助開發 # 說明 ：自 2025 年下半年起， GitHub Copilot Chat 已合併至 GitHub Copilot 擴充功能 ，不再需要單獨安裝。Copilot 提供免費方案（每月有使用限制），也可訂閱付費方案享有完整功能，包括 Agent 模式、MCP 伺服器整合等進階功能。詳情請參閱 GitHub Copilot 方案 。 在 VS Code 終端機中執行以下指令快速安裝所有推薦擴充功能： VS Code 提供設定同步功能，讓您在不同設備間保持一致的開發環境。 點擊左下角管理圖示（齒輪）或活動列的帳戶圖示 選擇 Turn on Settings Sync... 選擇要同步的項目： ✅ 設定 (Settings) ✅ 快捷鍵綁定 (Keybindings) ✅ 擴充功能 (Extensions) ✅ 使用者程式碼片段 (User Snippets) ✅ 使用者工作 (User Tasks) ✅ UI 狀態 (UI State) ✅ 設定檔 (Profiles) ✅ 設定 (Settings) ✅ 快捷鍵綁定 (Keybindings) ✅ 擴充功能 (Extensions) ✅ 使用者程式碼片段 (User Snippets) ✅ 使用者工作 (User Tasks) ✅ UI 狀態 (UI State) ✅ 設定檔 (Profiles) 使用 Microsoft 帳戶 或 GitHub 帳戶 登入 注意 ：Settings Sync 目前不支援 GitHub Enterprise 帳戶登入；企業環境如需集中管理設定，請改用第 6.9 節介紹的原則 (Policy) 機制。 設定檔 - editor、theme、font 等個人偏好設定 擴充功能 - 已安裝的擴充功能清單 程式碼片段與工作 - 自訂的程式碼片段、User Tasks UI 狀態 - 面板配置、視窗大小等 設定檔 (Profiles) - 完整的 Profile 組合（含各 Profile 專屬的擴充功能與設定） 工作區特定設定（ .vscode/settings.json ） 標記為 machine 或 machine-overridable 範圍的機器專屬設定 敏感資訊（如 tokens、密碼） 提示 ：連線到遠端視窗（Remote-SSH、Dev Containers、WSL）時，Settings Sync 不會 同步擴充功能到該遠端環境，須於遠端另行安裝所需擴充功能。 或按 Ctrl + Shift + P → Settings Sync: Show Settings Ctrl + Shift + P → Settings Sync: Turn Off 1.5 實務案例與注意事項 # 效能考量 ：不要安裝過多不必要的擴充功能，會影響 VS Code 啟動速度 版本相容性 ：定期更新擴充功能，確保與 VS Code 版本相容 工作區設定 ：某些擴充功能設定建議在工作區層級配置，避免影響其他專案 使用 Ctrl + Shift + P 開啟命令面板，輸入 Extensions: Show Recommended Extensions 查看工作區推薦的擴充功能 定期執行 Extensions: Update All Extensions 更新所有擴充功能 使用設定同步功能，在不同設備間保持一致的開發環境 2.1.1 開啟專案的方式 # 按 Ctrl + K, Ctrl + O 或選擇 File > Open Folder 正確開啟專案後，應該看到以下結構： 2.2 前端、後端工作區設定 (Workspace Settings) # 2.2.1 建立工作區設定檔 # 在專案根目錄建立 .vscode 資料夾，並創建以下設定檔： .vscode/settings.json - 工作區設定 .vscode/extensions.json - 推薦擴充功能 .vscode/launch.json - 偵錯設定 .vscode/tasks.json - 任務設定 2.3.1 前端編碼規範 (ESLint + Prettier) # frontend/.eslintrc.js frontend/.prettierrc 2.3.2 後端編碼規範 (Checkstyle) # backend/.vscode/checkstyle.xml 2.3.3 Maven 獨立安裝設定 # 從 Apache Maven 官網 下載最新版本 解壓縮到指定目錄，例如： D:\apache-maven-3.9.4 設定系統環境變數： MAVEN_HOME=D:\apache-maven-3.9.4 M2_HOME=D:\apache-maven-3.9.4 PATH=%PATH%;%MAVEN_HOME%\bin VS Code Maven 設定： Maven Wrapper 設定 (推薦)： 如果專案使用 Maven Wrapper，可以使用以下設定： 開啟 VS Code 命令面板： Ctrl + Shift + P 執行： Java: Reload Projects 檢查 Maven 擴充功能是否正常載入專案 在終端執行： mvn -version 確認版本正確 2.4 容器化開發環境 (Dev Containers) # 2.4.1 Dev Containers 簡介 # Dev Containers 讓團隊在一致的容器化環境中開發，確保 “在我的機器上可以運行” 的問題不再發生。 2.4.2 設定 Dev Container # 2. 建立 .devcontainer 資料夾： 3. 配置 devcontainer.json ： 開放規格 ： devcontainer.json 遵循開放的 Dev Container Specification ，設定可跨 VS Code、GitHub Codespaces 等多種工具通用。 devcontainer.json 支援六個依序執行的生命週期指令，適合將依賴安裝、資料庫初始化等步驟拆分到對應階段： Features（功能模組） ：可透過 features 屬性以宣告方式加入自足式的安裝單元（例如 CLI 工具），以 OCI Artifact 形式從公開或私有登錄庫散布： 亦可用 dev.containers.defaultFeatures 使用者設定，讓所有容器預設安裝特定 Features。 4. Docker Compose 設定： 2.4.3 使用 Dev Container # 啟動 Dev Container： 按 Ctrl + Shift + P 輸入 Dev Containers: Reopen in Container 常用 Dev Container 指令： 2.5 實務案例與注意事項 # 設定檔版本控制 ：將 .vscode 資料夾加入版本控制，確保團隊成員使用相同設定 路徑設定 ：確保所有路徑設定符合專案實際結構 效能最佳化 ：定期清理不必要的設定，避免影響 VS Code 效能 使用 Ctrl + Shift + P 執行 Developer: Reload Window 重新載入設定 定期執行 Preferences: Workspace Settings 檢查設定是否正確 建議將常用任務加入 VS Code 的任務面板快速存取 3.1 Git 與 GitHub/GitLab 整合 # 3.1.1 Git 基本操作 # 透過 VS Code Git 面板操作： 查看變更檔案 按 Ctrl + Shift + G 開啟 Git 面板 檢視 “Changes” 區段的修改檔案 按 Ctrl + Shift + G 開啟 Git 面板 檢視 “Changes” 區段的修改檔案 暫存變更 點擊檔案旁的 + 號暫存單一檔案 點擊 “Changes” 旁的 + 暫存所有變更 點擊檔案旁的 + 號暫存單一檔案 點擊 “Changes” 旁的 + 暫存所有變更 提交變更 在訊息框輸入提交訊息，或點擊訊息框上方的 閃光圖示 由 AI 依變更內容自動產生提交訊息建議 按 Ctrl + Enter 或點擊 ✓ 提交 在訊息框輸入提交訊息，或點擊訊息框上方的 閃光圖示 由 AI 依變更內容自動產生提交訊息建議 按 Ctrl + Enter 或點擊 ✓ 提交 推送到遠端 點擊狀態列的同步按鈕 或按 Ctrl + Shift + P → Git: Push 或按 Ctrl + Shift + P → Git: Push 3.1.2 GitLens 擴充功能使用 # 檔案歷史檢視 ：點擊編輯器中的 GitLens 註解 比較變更 ：右鍵檔案 → Compare with Previous Blame 檢視 ：查看每行程式碼的修改者和時間 分支檢視 ：在側邊欄檢視所有分支和提交歷史 3.1.3 GitHub/GitLab 整合設定 # 安裝 “GitHub Pull Requests and Issues” 擴充功能 按 Ctrl + Shift + P → GitHub: Sign In 完成授權後即可在 VS Code 中： 檢視和建立 Pull Request 管理 Issues 進行 Code Review 檢視和建立 Pull Request Ctrl + Shift + P → GitHub: Create Pull Request 在 Explorer 面板中直接檢視 PR 狀態 在編輯器中直接回覆 PR 評論 安裝 “GitLab Workflow” 擴充功能： code --install-extension gitlab.gitlab-workflow 安裝 “GitLab Workflow” 擴充功能： 設定 GitLab 存取權杖： 前往 GitLab → User Settings → Access Tokens 建立 Personal Access Token，權限包含： api - 完整 API 存取 read_user - 讀取使用者資訊 read_repository - 讀取倉庫資訊 設定 GitLab 存取權杖： 前往 GitLab → User Settings → Access Tokens 建立 Personal Access Token，權限包含： api - 完整 API 存取 read_user - 讀取使用者資訊 read_repository - 讀取倉庫資訊 api - 完整 API 存取 read_user - 讀取使用者資訊 read_repository - 讀取倉庫資訊 在 VS Code 中設定 GitLab： // settings.json { "gitlab.instanceUrl": "https://gitlab.yourcompany.com", "gitlab.personalAccessToken": "your-access-token", "gitlab.showPipelineUpdateNotifications": true, "gitlab.enableExperimentalFeatures": true } 在 VS Code 中設定 GitLab： Merge Request 管理 ：檢視、建立和審查 MR Pipeline 狀態 ：即時檢視 CI/CD Pipeline 狀態 Issue 追蹤 ：管理 GitLab Issues 程式碼審查 ：在 VS Code 中進行 MR 審查 分支管理 ：建立和切換 GitLab 分支 GitLab CI/CD 整合： 檢視 Pipeline 狀態： 在狀態列顯示目前分支的 Pipeline 狀態 點擊可直接開啟 GitLab Pipeline 頁面 檢視 Pipeline 狀態： 在狀態列顯示目前分支的 Pipeline 狀態 點擊可直接開啟 GitLab Pipeline 頁面 建立 .gitlab-ci.yml 檔案支援： 語法高亮和自動完成 即時語法檢查 範本片段支援 建立 .gitlab-ci.yml 檔案支援： GitLab 與 GitHub 比較： 3.1.4 內建三方合併編輯器 # VS Code 內建了三方合併編輯器 (3-way Merge Editor)，可視覺化解決 Git 合併衝突： 發生合併衝突時，在 Git 面板點擊衝突檔案 選擇 Resolve in Merge Editor 上方顯示「來源」與「目標」兩個分支的版本，下方為合併結果 使用 Accept Incoming / Accept Current / Accept Both 按鈕選擇保留的內容，或使用 AI 輔助衝突解決 選項讓 Copilot 依上下文提出建議合併結果 完成後點擊 Complete Merge 3.3 偵錯 (Debugging) 與斷點設定 # 新增斷點 ：在行號左側點擊，或按 F9 條件斷點 ：右鍵點擊斷點 → “Edit Breakpoint” → 設定條件 日誌斷點 ：在斷點不暫停的情況下輸出訊息 移除斷點 ：再次點擊斷點，或按 F9 一般斷點（Line breakpoint） ：程式執行到此處會暫停 條件斷點（Conditional breakpoint） ：可依運算式、命中次數或觸發條件決定是否暫停 日誌斷點（Logpoint） ：以菱形圖示顯示，輸出訊息但不暫停執行 函式斷點（Function breakpoint） ：依函式名稱設定，不需綁定特定行號 行內斷點（Inline breakpoint） ：可指定同一行中特定欄位（column）位置暫停，適合處理壓縮/精簡化程式碼 資料斷點（Data breakpoint） ：當指定變數被讀取或寫入時觸發 3.3.2 前端偵錯 (Vue 3 + TypeScript) # VS Code 內建 JavaScript 偵錯： 注意 ：「Debugger for Chrome」擴充功能已棄用，VS Code 已內建 JavaScript 偵錯器，支援 Chrome、Edge 等瀏覽器偵錯，無需額外安裝擴充功能。 在 launch.json 中配置： 啟動開發伺服器： npm run dev 3.3.3 後端偵錯 (Spring Boot) # Java 偵錯設定： 在 launch.json 中配置： 在 Java 程式碼中設定斷點 透過 API 測試工具觸發相關端點 3.3.4 偵錯控制快捷鍵 # 3.4 終端機與多工作區使用 # 3.4.1 終端機基本操作 # 按 Ctrl + ` (反引號) 或選擇 Terminal > New Terminal 新增終端機 ：點擊終端機面板的 + 號 分割終端機 ：點擊分割按鈕或按 Ctrl + Shift + 5 關閉終端機 ：點擊垃圾桶圖示或按 Ctrl + Shift + ` 新視窗 ： File > New Window 或 Ctrl + Shift + N 多資料夾工作區 ： File > Add Folder to Workspace 工作區檔案 ：儲存為 .code-workspace 檔案 使用 Ctrl + Tab 在不同視窗間切換 使用 Ctrl + 1, 2, 3... 切換編輯器群組 3.4.3 實用終端機指令 # 3.5 程式碼片段 (Snippets) 使用 # 3.5.1 使用內建程式碼片段 # VS Code 提供豐富的內建程式碼片段，加速程式碼撰寫效率。 常用 JavaScript/TypeScript 片段： 3.5.2 自訂程式碼片段 # 按 Ctrl + Shift + P 輸入 Preferences: Configure User Snippets 選擇語言或建立新的全域片段檔案 Vue 3 Composition API 片段範例： Spring Boot Controller 片段範例： 3.5.3 專案特定程式碼片段 # 在專案根目錄建立 .vscode/snippets.code-snippets ： 3.5.4 程式碼片段最佳實務 # 簡潔的前綴 ：使用容易記憶的簡短前綴 合理的佔位符 ：使用有意義的變數名稱 適當的預設值 ：提供常用的預設值 清楚的描述 ：撰寫描述性的說明 3.6 AI 輔助開發 — GitHub Copilot # GitHub Copilot 是 VS Code 中最強大的 AI 輔助工具，能大幅提升開發效率。自 2025 年底起，VS Code 將「Ask」「Edit」「Agent」三種對話模式逐步整合為統一的 代理架構 (Agents) ：對話、工作區操作與變更執行都建立在同一套「代理迴圈 (agent loop)」與 工作階段 (Session) 概念之上，並可在 Chat 面板、Agents 視窗、瀏覽器（vscode.dev/agents）、CLI 與 GitHub Copilot App 之間無縫交接。截至 2026 年 8 月（VS Code v1.134），這是 VS Code 發展最快速的功能領域，建議定期查閱 VS Code Release Notes 掌握最新變動。 前置條件 ：需先安裝 GitHub Copilot 擴充功能（參見 1.3.5 AI 輔助開發 ），並登入 GitHub 帳號。Copilot Chat 功能已內建於 Copilot 擴充功能中，無需單獨安裝。 ⚠️ 重大變更提醒（v1.126，2026年6月） ：獨立的「 Edit 模式 」已正式棄用並移除，其編輯能力已完全併入 Agent 模式 。舊版教學或書籍中提及的「Edit Mode」目前已不存在於模式選單中，若你的專案仍在使用舊版 VS Code，請盡快升級並改用 Agent 模式。同時，原本的「Chat Modes」（ .chatmode.md ）已更名為「 Custom Agents 」（ .agent.md ），舊檔案建議重新命名副檔名以確保相容性。 3.6.1 程式碼自動完成與 Next Edit Suggestions # 在編輯器中輸入程式碼時，Copilot 會以灰色文字顯示建議： 撰寫清楚的函式名稱和註解，Copilot 能產生更好的建議 在 JavaDoc 或 JSDoc 中描述功能，Copilot 會根據文件產生對應實作 Copilot 會根據檔案上下文和已開啟的其他檔案來推斷意圖 Next Edit Suggestions（NES）： NES 是 Copilot 的進階功能，會根據你目前的編輯模式 預測你接下來最可能的編輯位置和內容 。當偵測到潛在的下一步編輯時，編輯器會在相關位置顯示建議，按 Tab 即可跳轉並套用。 提示 ：NES 特別適合重複性重構操作，例如統一修改變數名稱或批次新增參數，它會自動建議下一個需要修改的位置。 3.6.2 Copilot Chat 對話式助手 # 按 Ctrl + Alt + I 開啟 Chat 面板（已內建於 Copilot 擴充功能中）。目前官方以 AI features cheat sheet 作為指令與工具的權威速查表，以下為依用途分類整理的常用項目。 內建 @ 對話參與者（目前僅保留三種）： 重要變更 ：舊版用於查詢整個專案的 @workspace 參與者已不存在於目前的內建清單中。現行 Agent 模式會透過內建工具（如 #search ／ codebase ）自動判斷何時需要搜尋整個工作區，通常不需要手動輸入 @workspace ；一般對話與提問已預設具備代理能力。 常用 # 工具／上下文參考（節選）： 3.6.3 Inline Chat（行內聊天） # 在編輯器中按 Ctrl + I 直接開啟行內聊天，無需切換到 Chat 面板即可進行程式碼修改。 在編輯器中按 Ctrl + I 輸入自然語言指令，例如：「加入輸入驗證」「重構為 Stream API」 3.6.4 智慧動作 (Smart Actions) # 右鍵選取程式碼時可使用 Copilot 智慧動作： Copilot > 解釋這段程式碼 ：取得程式碼說明 Copilot > 修正這段程式碼 ：自動修正問題 Copilot > 產生文件 ：產生 JavaDoc / JSDoc Copilot > 產生測試 ：產生對應的單元測試 修正測試失敗 ：分析失敗的測試並建議修正 產生 Commit Message ：根據變更自動產生提交訊息 語義搜尋 ：跨專案進行語義搜尋 3.6.5 Agent 模式與工作階段 (Sessions) # Agent 模式是 VS Code 最重要的 AI 功能 ，它讓 Copilot 從「被動建議」進化為「主動執行」。Agent 的核心運作機制稱為 代理迴圈 (Agent Loop) ：Agent 使用語言模型持續推理上下文並呼叫工具，重複此迴圈直到任務完成、需要使用者輸入，或被手動中止為止。 工作階段 (Session) 概念： 一個 Session 保存了單一任務的完整對話、工作區狀態、變更紀錄與執行狀態，讓你可以暫停、恢復，或將任務交接給其他介面。同一個 Session 可以在以下介面間無縫切換： 按 Ctrl + Alt + I 開啟 Chat 面板（預設即為 Agent 模式） Agent 會自動：建立檔案、安裝依賴、執行指令、自我修正錯誤 可同時執行多個 Session，各自專注在不同任務，並支援拖放分組整理 編輯器面板可將開啟的檔案／差異與對話並列顯示，共用同一組分頁列 追蹤整個對話（而非僅最後一次請求）的模型用量／額度消耗，並可個別檢視子代理的用量 提示 ：可隨時將任務從一種代理類型移交到另一種，完整的對話歷史會自動保留。此能力建立在新的 代理主機 (Agent Host) 與 Agent Host Protocol (AHP) 架構之上，該架構也是多視窗共用同一 Session、以及 3.6.6 節 Autopilot 功能的底層基礎。 Agent 可執行的操作範例： 建立分支並開啟 Pull Request 使用 代理式瀏覽器工具 （Agentic Browser Tools，已正式發布）操作真實網頁：導覽頁面、擷取畫面、驗證 Web 應用程式行為 3.6.6 權限與核准控制（含 Autopilot） # VS Code 提供分層的權限控制機制，讓你決定 Agent 擁有多大的自主權。目前於 Chat 面板的權限選擇器中可選擇以下 核准層級 ： 注意 ： Autopilot 嚴格來說是一種「代理模式」，而非上述核准層級之一 。啟用後，代理會自動核准所有工具呼叫、自動重試錯誤，並在遇到澄清性問題時自動回答，持續自主工作直到判定任務完成為止，執行於 3.6.5 節提及的 Agent Host 之上。 ⚠️ 安全提醒 ：Bypass Approvals 與 Autopilot 會繞過手動核准提示，包括可能具破壞性的操作（如檔案編輯、終端機指令、外部工具呼叫）。危險指令（如 rm 、 del ）預設仍會被封鎖。首次啟用時會顯示確認警告，且權限等級僅適用於目前 Session，可隨時切換。也可用斜線指令 /yolo （或 /autoApprove ）快速啟用全域自動核准、以 /disableYolo 停用。MCP 伺服器的工具呼叫另有獨立的核准範圍（Session／工作區／使用者層級），詳見 3.6.9 節。企業環境可透過集中原則（見 6.9 節）強制限制或停用自動核准功能。統一管理入口為指令 Chat: Manage Tool Approval 。 3.6.7 Plan Agent（計畫代理） # Plan Agent 是內建的計畫代理，可在撰寫任何程式碼之前，將任務分解為結構化的實作計畫，並遵循以下 四階段流程 ： 於 Chat 中輸入 /plan ，或從代理選擇器切換至 Plan Agent 描述你的任務需求，Plan Agent 會依上述四階段與你互動 重要限制 ：在計畫經過審核並確認前，Plan Agent 不會 進行任何程式碼變更 計畫確認後，透過 Handoffs（交接） 功能一鍵將計畫移交給實作代理（本地、背景或雲端），並自動保留完整上下文；也可先儲存計畫供日後使用 3.6.8 自訂指示檔 (Custom Instructions) # 自訂指示檔讓 Copilot 了解你的專案慣例，確保 AI 產生的程式碼符合你的風格。VS Code 支援多種指示檔格式： 永遠啟用的指示檔（Always-on）： .github/copilot-instructions.md 範例： 檔案型指示檔（File-based）— .instructions.md ： 根據檔案類型或路徑動態套用不同的指示： 四種指示檔機制彙整（會同時合併套用，非互斥）： 指示套用優先順序 ：當指示內容互相衝突時，優先順序為「個人（使用者層級）」> 「倉庫層級（ .github/copilot-instructions.md / AGENTS.md ）」> 「組織層級」。但官方文件強調：所有類型的指示都會一併提供給 AI，優先順序僅在 發生直接衝突 時才生效，其餘情況為疊加套用。 在 Chat 中輸入 /init — 分析專案並產生 copilot-instructions.md 在 Chat 中輸入 /create-instruction — 根據描述產生特定指示檔 組織層級指示： 可在 GitHub 組織層級定義共用指示，跨多個工作區和倉庫自動套用，並顯示在 Chat 的 Instructions 選單中： 撰寫建議 ：指示內容應簡短且自成一體，說明「為什麼」而非只說「是什麼」，提供具體程式碼範例，並依主題拆分為多個 .instructions.md 檔案分別管理，同時將指示檔納入版本控制。 提示 ：使用 Chat 面板的齒輪圖示 > Instructions & Rules ，或指令 Chat: Open Customizations ，可查看和管理所有已載入的指示檔（見 3.6.10 節的 Agent Customizations 編輯器）。 3.6.9 MCP 伺服器整合 # MCP（Model Context Protocol） 是一個開放標準，用於將 AI 模型連接到外部工具與服務。在 VS Code 中，MCP 伺服器為 Agent 提供資料庫查詢、API 呼叫、瀏覽器操作等工具。 開啟擴充功能面板 ( Ctrl + Shift + X )，搜尋 @mcp ，從 MCP 伺服器圖庫中安裝 或執行 Ctrl + Shift + P → MCP: Add Server （精靈式引導設定） 或透過命令列 code --add-mcp 快速加入 確認信任後，VS Code 會自動發現伺服器的工具 手動設定 MCP 伺服器（ .vscode/mcp.json ）： 注意 ：頂層鍵名固定為 servers （而非部分其他 MCP 用戶端慣用的 mcpServers ），這是 VS Code 有意為之的差異，設定時請特別留意。 工具數量上限 ：Copilot 目前對單一 Session 最多支援 128 個工具 ，啟用 MCP 伺服器時應謹慎挑選，避免超出上限或稀釋 Agent 的工具選擇準確度。 安全性 （macOS/Linux）： Ctrl + Shift + P → MCP: List Servers — 檢視所有伺服器 Ctrl + Shift + P → MCP: Add Server — 新增伺服器 在 mcp.json 中使用 Code Lens 直接啟動/停止/重啟伺服器 注意 ：MCP 伺服器可執行任意程式碼，只安裝來自信任來源的伺服器。 3.6.10 Custom Agents（自訂代理） # Custom Agents 讓 AI 擔任特定角色，例如安全審查員、資料庫管理員或文件撰寫者，每個代理定義自己的行為、可用工具、語言模型偏好與可呼叫的子代理。此機制原稱為「Chat Modes」（ .chatmode.md ），已正式更名並統一為 Custom Agents（ .agent.md ）；若專案中仍有舊版 .chatmode.md 檔案，建議重新命名以確保相容。 建立 .agent.md 檔案： 在 .github/agents/ （或相容 Claude 格式的 .claude/agents/ ）資料夾中建立： Frontmatter 欄位說明： 子代理 (Subagent) 執行模式： 在獨立的上下文視窗中執行，不繼承主對話的完整歷史，有助於保持主對話上下文精簡 以同步方式執行：主代理會等待子代理完成後才繼續 多個獨立分析任務可平行呼叫子代理 僅將 最終結果 回傳給呼叫端；透過 #agent/runSubagent 工具觸發 若需允許子代理再呼叫其他子代理（遞迴呼叫），需設定 chat.subagents.allowInvocationsFromSubagents 在 Chat 中輸入 /create-agent 使用 AI 輔助建立 或使用指令 Chat: New Custom Agent 或透過 Agent Customizations 編輯器 （齒輪圖示 → Configure Chat → Agents 分頁）集中管理，該編輯器同時可管理 Skills、Instructions、Prompts 與 Hooks，並顯示各項目的來源（內建／使用者／工作區／組織／擴充功能） 3.6.11 Agent Skills（代理技能） # Agent Skills 將專業能力打包為可重複使用的技能資料夾，包含指示、腳本和資源。 此功能目前已為正式發布版本 (General Availability) ；其中「Forked Context」執行模式（見下）仍為實驗性功能，須透過 github.copilot.chat.skillTool.enabled 啟用。Skills 基於 開放標準 agentskills.io ，可跨 VS Code、GitHub Copilot CLI 和 GitHub Copilot coding agent 使用，同一份 Skill 無需修改即可於三種介面共用。 命名限制 ：資料夾名稱須與 SKILL.md 中的 name 欄位一致，僅限小寫字母、數字與連字號，長度上限 64 字元； description 上限 1024 字元。 三層漸進式載入機制 （確保上下文使用效率）： 探索層 ：Agent 僅讀取 name 與 description 兩個 metadata 欄位，判斷此 Skill 是否與當前任務相關 指示層 ：判定相關或使用者明確呼叫時，才載入 SKILL.md 完整內容 資源層 ：僅在指示內容明確參照時，才載入 scripts/ 、 templates/ 等附屬檔案 個人層級位置 ： ~/.copilot/skills/ 、 ~/.claude/skills/ 、 ~/.agents/skills/ （或透過 chat.agentSkillsLocations 自訂）。 context: fork （實驗性） ：在 frontmatter 中設定後，此 Skill 會於獨立的子代理上下文中執行，僅將最終結果回傳主對話，適合會產生大量中間輸出的技能。 在 Chat 中輸入 /create-skill 使用 AI 生成 或於 Agent Customizations 編輯器選擇「New Skill」 或手動建立 SKILL.md 檔案定義技能行為 社群資源 ：可參考 github/awesome-copilot 、 anthropics/skills 等公開倉庫取得現成的 Skill 範例；部分 Skill 也會直接捆綁在 3.6.15 節介紹的 Agent Plugins 之中發布。 與 Custom Instructions 的差異 ：Instructions 僅描述程式碼慣例、且僅於 VS Code / GitHub.com 適用、永遠套用或依 glob 條件套用；Skills 則用於封裝可攜式的專業能力與工作流程，可包含腳本與資源，並依需要才載入。 3.6.12 Prompt Files（提示檔案） # Prompt Files 將常見任務編碼為 Markdown 檔案，需 手動觸發 （不像 Instructions 會自動套用），適合封裝重複性的一次性任務，例如腳手架產生、修測試、準備 PR 說明等。 建立 .prompt.md 檔案： 在 .github/prompts/ 資料夾中建立： Frontmatter 欄位 ： description 、 name （預設為檔名）、 argument-hint 、 agent （可指定 ask 、 agent 、 plan 或自訂代理名稱）、 model 、 tools （支援萬用字元，如 <server>/* ）。工具解析優先順序為：Prompt File 自訂的 tools > 所指定 Custom Agent 的 tools > 該代理的預設工具集。 於 Chat 輸入框輸入 /scaffold-component （可附加參數，如 /scaffold-component componentName=UserCard ） 或執行指令 Chat: Run Prompt 或開啟該檔案並點擊編輯器標題列的執行按鈕 使用 /create-prompt 讓 AI 幫你生成提示檔案； /prompts 開啟設定選單 存放位置 ：工作區預設為 .github/prompts （可透過 chat.promptFilesLocations 自訂）；也可存放於使用者層級 Profile 目錄，跨工作區共用。 發展趨勢 ：官方已提供 chat.customizations.promptMigration.enabled 設定，用於將既有 Prompt Files 逐步轉換為 3.6.11 節的 Agent Skills ——這代表 Skills 是官方規劃中 Prompt Files 的長期演進方向，新專案可優先考慮直接採用 Skills。 3.6.13 Hooks（生命週期鉤子） #

Hooks 在 Agent 工作階段的關鍵生命週期點執行自訂 shell 命令，用於強制執行安全政策、格式化程式碼或建立稽核軌跡。 此功能目前仍為 Preview（預覽）狀態，設定格式與行為可能於未來版本調整。 運作機制 ：每個事件觸發時，會以 JSON 格式將資料透過 stdin 傳給指定的 shell 指令；該指令可將 JSON 寫入 stdout 以影響後續行為，包含直接 阻擋某次工具呼叫 。Hooks 為確定性 (deterministic) 執行——只要事件發生就必定執行，不同於由模型自行判斷的行為。 設定 Hooks（工作區 .github/hooks/*.json ，或相容 Claude 格式的 .claude/settings.json ）： 封鎖危險操作（如 rm -rf 、 DROP TABLE ） 檔案編輯後自動執行格式化 / Lint Agent 完成任務後自動執行測試 於提示送出前注入額外的專案上下文 Agent-scoped Hooks ：可直接在 Custom Agent 的 .agent.md frontmatter 中定義專屬 hooks，僅在選擇該代理或透過 runSubagent 呼叫時執行，不影響其他 Chat 互動。啟用方式：設定 "chat.useCustomAgentHooks": true ；自訂搜尋位置可用 chat.hookFilesLocations 。 使用方式 ：於 Chat 輸入 /hooks 開啟設定選單，或 /create-hook 使用 AI 輔助產生。 企業提醒 ：組織可透過原則（見 6.9 節）全域停用 Hooks 功能；若團隊成員回報 Hooks 無效，請優先確認是否受組織原則限制。 3.6.14 語言模型選擇 # VS Code 支援在不同任務間切換 AI 模型，選擇最適合當前需求的模型： 在 Chat 面板的模型選擇器中選擇（快捷鍵 Ctrl + Alt + . ） 快速任務使用較快的模型，複雜架構決策使用更強大的模型 選擇 Auto （自動選模，已為正式版）：系統會依任務複雜度與模型即時可用性，自動路由至合適的模型；將滑鼠停留在回覆上可查看實際生成的模型 於 語言模型編輯器 （Language Models editor）中可釘選常用模型，方便快速切換 GitHub Copilot 提供的預設模型（涵蓋 OpenAI、Anthropic、Google Gemini 等，並可透過 Azure 代管存取） 第三方代理主機（Anthropic Claude Agent、OpenAI Codex Agent 等，見 3.6.5 節） BYOK（Bring Your Own Key，自帶金鑰） ：可連接個人 API 金鑰使用 Chat Completions、Responses 或 Anthropic Messages API 相容的供應商（Azure、Anthropic、Hugging Face、Gemini、OpenAI、OpenRouter，亦支援 Ollama / Foundry Local 等本地部署模型），且 無需 GitHub 帳號或 Copilot 訂閱 即可用於一般對話與工具任務（但行內自動完成與語意搜尋仍需 GitHub 帳號驗證） 提示 ：模型選擇器中會分開列出「Copilot 內建模型」與「BYOK 模型」兩組，方便在對話過程中自由切換供應商。由於模型版本與供應商陣容變動頻繁（約每月更新），具體模型名稱請以 VS Code 內的模型選擇器即時清單為準，本文不列出固定版本號。 GitHub Copilot 方案與額度（摘要，以官方頁面為準）： 參考資源 ： Build with agents in VS Code 、 AI Customization 總覽 、 MCP 伺服器設定 、 GitHub Copilot 方案 3.6.15 Agent Plugins（代理外掛） # Agent Plugins 1.0 是 2026 年 8 月新推出的開放標準，用於將 Agent Skills、MCP 伺服器 （以及 VS Code 專屬的 Custom Agents、Hooks、斜線指令）打包為單一可安裝單元，可跨 GitHub Copilot in VS Code、GitHub Copilot CLI 與 GitHub Copilot App 使用，且不綁定特定廠商。 擴充功能面板篩選 @agentPlugins Agent Customizations 編輯器的 Plugin 分頁 指令 Chat: Install Plugin From Source （貼上 Git URL 即可安裝） 透過 GitHub Copilot CLI 安裝後自動同步至 VS Code 外掛市集（Marketplace）： 預設可從 GitHub 官方的 copilot-plugins 與 awesome-copilot 倉庫安裝，亦可透過 chat.plugins.marketplaces 設定擴充（支援 owner/repo 簡寫、完整 URL 或本機路徑）。首次從新市集安裝時會顯示信任確認提示。 ⚠️ 安全提醒 ：Agent Plugins 可能包含會在你機器上執行程式碼的 Hooks 與 MCP 伺服器，安裝前務必確認發佈者身分與外掛內容，僅安裝來自信任來源的外掛。 3.7 實務案例與注意事項 # 版本控制 ：經常提交變更，避免遺失程式碼 分支管理 ：使用功能分支進行開發，避免直接在主分支修改 程式碼格式化 ：設定自動格式化，保持程式碼風格一致 使用 Git 工作流程：Feature Branch → Pull Request → Code Review → Merge 定期同步遠端分支，避免合併衝突 善用 VS Code 的多游標編輯功能提升效率（ Ctrl + Alt + Up/Down ） 使用程式碼片段（Snippets）加速常用程式碼撰寫 善用 GitHub Copilot Agent 模式處理跨檔案重構和大型任務，並以 Plan Agent 先行規劃再交接執行 使用 /init 指令初始化專案的 AI 自訂設定 設定 MCP 伺服器擴展 Agent 的外部工具存取能力，並留意 128 個工具的上限 建立 .instructions.md 或 AGENTS.md 檔案確保 AI 產生的程式碼符合專案慣例 將團隊常用的工作流程封裝為 Agent Skills 或 Agent Plugins，跨 VS Code、Copilot CLI 共用 涉及破壞性操作（檔案刪除、資料庫遷移、生產環境指令）時，避免使用 Autopilot／Bypass Approvals，改用 Default Approvals 逐一確認 4. 專案特定開發流程指引 # 4.1 前端開發流程 (Vue 3 + TypeScript) # 4.1.1 專案啟動與設定 # 開啟專案 cd d:\your-project\frontend code . 安裝相依套件 npm install # 或使用 yarn yarn install 檢查 Node.js 版本 node --version # 建議使用 Node.js 20+ (LTS) npm --version # 建議使用 npm 10+ 4.1.2 開發伺服器啟動 # 方式一：透過 VS Code 任務 按 Ctrl + Shift + P 輸入 Tasks: Run Task 選擇 Frontend: Dev Server 預設連接埠： http://localhost:3000 自動重新載入：檔案異動時自動更新 開發工具：Vue DevTools 整合 配置 launch.json： 在 .vue 或 .ts 檔案中設定斷點 E2E 測試 (Cypress)： 4.2 後端開發流程 (Spring Boot) # 4.2.1 Java 環境設定 # VS Code Java 設定： 確保已安裝以下擴充功能： Extension Pack for Java Spring Boot Extension Pack 4.2.2 Spring Boot 應用程式啟動 # 方式一：透過 VS Code 偵錯 開啟主要應用程式類別（通常是 Application.java ） 點擊類別上方的 “Run” 或 “Debug” 連結 方式二：透過 Maven 任務 方式三：透過 VS Code 任務 按 Ctrl + Shift + P 選擇 Tasks: Run Task 選擇 Backend: Maven Spring Boot Run 在 Java 程式碼中點擊行號左側設定斷點 使用 Postman 或前端應用程式觸發 API 使用 REST Client 擴充功能： 建立 api-test.http 檔案： 4.3.1 同時啟動前後端 # 使用 VS Code 複合任務： 在 tasks.json 中新增： 終端機 1： cd backend mvn spring-boot:run 終端機 2： cd frontend npm run dev 4.3.2 API 介接開發 # 在 frontend/src/config/api.ts 中： MySQL 資料庫 (生產環境)： 4.4.1 前端程式碼檢查 # 4.4.2 後端程式碼檢查 # 使用 Lighthouse 擴充功能： 安裝 “Lighthouse” 擴充功能 在開發者工具中執行 Lighthouse 分析 Vue DevTools 效能分析： Bundle 大小分析： npm run build -- --report Core Web Vitals 監控 Spring Boot Actuator 設定： 4.5.3 VS Code 效能診斷 # 按 Ctrl + Shift + P 輸入 Developer: Startup Performance 4.6 實務案例與注意事項 # 連接埠衝突 ：確保前後端使用不同連接埠 環境變數 ：正確設定開發和生產環境變數 API 版本控制 ：使用 API 版本控制避免相容性問題 錯誤處理 ：前後端都要有適當的錯誤處理機制 使用功能分支進行開發，避免直接在主分支修改 使用 API 文件工具（如 Swagger）記錄 API 規格 實施 Code Review 流程，提升程式碼品質 4.7 Python 開發環境設定 # 4.7.1 Python 專案結構 # 標準 Python 專案結構： 4.7.2 Python 環境設定 # VS Code Python 解譯器設定 # 按 Ctrl + Shift + P 輸入 “Python: Select Interpreter” 選擇虛擬環境中的 Python .vscode/settings.json Python 設定： 4.7.3 Python 開發工具設定 # Ruff 設定（pyproject.toml）： 說明 ：Ruff 整合了 Pylint、Flake8、Black、isort 等多種工具的功能於單一工具中，效能更快且設定更簡潔。 pytest 設定（pytest.ini）： 4.7.4 Python 偵錯設定 # .vscode/launch.json Python 設定： 4.7.5 Python 任務設定 # .vscode/tasks.json Python 任務： 4.7.6 Python 專案範例 # 主應用程式（src/main.py）： 需求檔案（requirements.txt）： 4.7.7 Python 開發最佳實務 # 使用 pip-tools 管理依賴： requirements.in 範例： 5.1 Live Share 即時協作 # 5.1.1 Live Share 設定 # Live Share 讓團隊成員可以即時協作編輯程式碼，無需複雜的環境設定。 按 Ctrl + Shift + P 輸入 Live Share: Start Collaboration Session 5.1.2 Live Share 功能 # 即時程式碼編輯 ：多人同時編輯同一檔案 共享終端機 ：分享終端機操作權限 共享伺服器 ：自動轉發本地伺服器連接埠 追蹤游標 ：查看其他參與者的游標位置 主持人 ：啟動 Live Share 工作階段 協作編輯 ：即時查看和編輯程式碼 結束工作階段 ：主持人結束協作 5.1.3 Live Share 最佳實務 # 5.2.1 團隊設定標準化 # 5.2.2 工作流程標準化 # 5.3.1 GitHub Pull Request 整合 # 設定 GitHub PR 擴充功能： 建立 PR ： Ctrl + Shift + P → GitHub: Create Pull Request 查看變更 ：在 GitHub Pull Requests 面板檢視差異 新增評論 ：直接在程式碼行上新增審查評論 回應評論 ：在 VS Code 中直接回覆討論 核准合併 ：完成審查後核准 PR 5.3.2 GitLab Merge Request 整合 # 設定 GitLab MR 擴充功能： 建立 MR ： Ctrl + Shift + P → GitLab: Create Merge Request 查看管道狀態 ：在狀態列查看 CI/CD 管道執行狀態 審查變更 ：在 GitLab 面板檢視檔案差異 新增評論 ：在程式碼行上新增審查建議 追蹤問題 ：整合 GitLab Issues 進行追蹤 合併請求 ：審查完成後執行合併 GitLab 與 GitHub 比較： 5.3.3 程式碼審查檢查清單 # TypeScript 類型定義是否完整 是否遵循 Vue 3 最佳實務 CSS 樣式是否符合 Tailwind 規範 API 設計是否 RESTful 使用 Markdown 撰寫文件 6.1.1 進階程式碼片段語法 # 文件位置提醒 ：擴充功能開發（Extension API）的官方文件入口為 code.visualstudio.com/api ； docs/extension-docs/overview 頁面實際上是「Container Tools」「Data Science」「Azure 工具」等特定工作流程擴充功能的導覽頁，並非 API 文件本身，若尋找 API／腳手架文件請直接以 /api 為準。 6.2.1 建立基本擴充功能 # 初始化擴充功能專案（免安裝方式）： New Extension (TypeScript) New Color Theme New Language Support New Code Snippets 腳手架流程中還會詢問：擴充功能名稱／識別碼／描述、是否初始化 Git、 打包工具 （unbundled／webpack／esbuild）、套件管理器（npm／yarn／pnpm）。產生的進入點為 src/extension.ts ，內含必要的 activate() 與選用的 deactivate() 函式； package.json 中的 engines.vscode 欄位用於宣告相容的 VS Code 版本。按 F5 即可啟動「Extension Development Host」除錯視窗測試擴充功能。 AI／Chat 相關 API（近期擴充重點）： Chat Participant API、Language Model Tool API、Language Model Chat Providers、Prompt TSX（用於結構化組裝 AI 提示），以及 MCP 開發指南——這是目前 Extension API 文件成長最快的領域，反映 VS Code 對代理式擴展能力的持續投入。 使用官方 CLI 工具 vsce ： ⚠️ 重要期限提醒 ：Azure DevOps 將於 2026 年 12 月 1 日 停用全域個人存取權杖 (PAT)。目前以 PAT（ Marketplace > Manage 權限範圍）發佈擴充功能仍可運作，但屬於即將淘汰的舊方法。官方建議改用 基於 Microsoft Entra ID 的發佈方式 （workload identity federation／受控識別，例如 vsce publish --azure-credential ），及早規劃遷移可避免期限逼近時的發佈中斷風險。 6.3.1 Task 自動化 # VS Code 任務系統概述： VS Code 任務系統讓您可以自動化常見的開發工作流程，如建置、測試、部署等。 Ctrl + Shift + P → Tasks: Run Task - 執行任務 Ctrl + Shift + P → Tasks: Configure Task - 配置任務 Ctrl + Shift + P → Tasks: Restart Running Task - 重新啟動任務 Ctrl + Shift + B - 執行建置任務 6.3.2 GitHub Actions 整合 # 設定 GitHub Actions： 6.3.3 GitLab CI/CD 整合 # 設定 GitLab CI/CD： VS Code 中的 CI/CD 監控： GitHub Actions ：使用 GitHub Actions 擴充功能查看工作流程狀態 GitLab CI/CD ：使用 GitLab Workflow 擴充功能監控 Pipeline 狀態 即時通知 ：CI/CD 狀態變更時接收通知 6.5 遠端開發與 SSH # Remote Development 擴充套件包 目前包含四個延伸模組，依情境選用： 每種擴充功能都會在遠端作業系統安裝獨立的 VS Code Server ，本機端不需要存放任何原始碼；絕大多數 VS Code 擴充功能無需修改即可在遠端環境中運作。 6.5.1 Remote SSH 設定 # 安裝 Remote SSH 擴充功能： Ctrl + Shift + P → Remote-SSH: Connect to Host VS Code 會在遠端建立伺服器並同步擴充功能 遠端主機系統需求（重點摘要）： 本機需具備相容 OpenSSH 的用戶端（ Windows 不支援 PuTTY ） 遠端主機建議至少 1 GB RAM（2 GB + 雙核心較佳） Linux 遠端主機需具備 /bin/bash 、 tar ，以及 curl 或 wget glibc 版本要求 ：目前官方預先建置的伺服器僅相容 glibc 2.28 以上 （如 Debian 10、RHEL 8、Ubuntu 20.04 以上版本）；使用 musl-based 的 Alpine Linux 不受官方支援 密碼含 passphrase 的 SSH 金鑰可能導致 Git 操作卡住，建議搭配 ssh-agent 使用 6.5.2 遠端開發最佳實務 # 6.6 工作區管理進階技巧 # 6.6.1 多根工作區 (Multi-root Workspace) # 6.7 設定檔 (Profiles) 管理 # VS Code Profiles 讓你為不同開發情境（前端、後端、資料科學等）切換不同的設定組合，包括擴充功能、設定、鍵盤快捷鍵和 UI 狀態。 6.7.1 建立與切換 Profile # 點擊左下角齒輪圖示 → Profiles 選擇 Create Profile… 輸入名稱（如「Java 開發」「前端開發」「Python 開發」） 選擇要從現有 Profile 複製的項目，或從空白開始 Ctrl + Shift + P → Profiles: Switch Profile 點擊左下角齒輪圖示 → 從清單中選擇 6.7.2 Profile 內容與範本 # 每個 Profile 包含以下項目： Settings ：編輯器與工作區設定 Keyboard Shortcuts ：鍵盤快捷鍵 User Snippets ：使用者程式碼片段 User Tasks ：使用者任務 UI State ：側邊欄位置、面板大小等 Extensions ：已安裝的擴充功能清單 MCP Servers ：MCP 伺服器設定（各 Profile 可獨立設定） VS Code 提供多種預設 Profile 範本： 6.7.3 匯出與分享 Profile # Ctrl + Shift + P → Profiles: Export Profile... 選擇匯出方式： GitHub Gist ：產生可分享的連結 Local File ：儲存為 .code-profile 檔案 GitHub Gist ：產生可分享的連結 Local File ：儲存為 .code-profile 檔案 Ctrl + Shift + P → Profiles: Import Profile... 貼上 GitHub Gist 連結或選擇本機檔案 團隊建議 ：將專案推薦的 Profile 匯出為 GitHub Gist，新進成員可以一鍵匯入，快速完成開發環境設定。 6.7.4 資料夾與工作區關聯 # 可以將特定 Profile 自動綁定到特定專案資料夾： Ctrl + Shift + P → Profiles: Associate Profile with Folder... 之後每次開啟該資料夾，VS Code 會自動切換到對應的 Profile。 6.8 Agent Customizations 編輯器 # VS Code 引入了 Agent Customizations 編輯器 （早期版本稱為 Chat Customizations 編輯器），提供集中式的圖形化介面來管理所有 AI 相關的客製化設定，不再需要手動編輯 JSON 檔案或散落在各處的設定。 6.8.1 開啟 Agent Customizations 編輯器 # Ctrl + Shift + P → Chat: Open Customizations 或從 Copilot Chat 面板的齒輪圖示進入 每個項目都會標示其來源（內建 / 使用者層級 / 工作區層級 / 組織層級 / 擴充功能），並提供診斷資訊協助排查設定衝突。 提示 ：Agent Customizations 編輯器會顯示所有作用域（使用者層級、工作區層級、資料夾層級、組織層級）的設定，方便一覽全貌。 6.9 企業級管理與治理原則 (Enterprise Policies) # VS Code 提供完整的企業治理機制，讓 IT 部門能在受管理的裝置上集中設定政策、限制擴充功能來源，並針對近年快速發展的 AI Agent 功能訂立使用邊界。詳細規格請參閱 VS Code for Enterprise 官方文件。 6.9.1 集中部署與原則管理 # 可依發佈者、擴充功能 ID 或版本進行允許清單控管，並可設定私有／自架 Marketplace（ ExtensionGalleryServiceUrl ）取代公開 Marketplace。 6.9.2 AI／Agent 治理原則（近期擴充重點） # 隨著 Agent 功能快速發展，VS Code 企業原則已大幅擴充至 AI 治理範疇，涵蓋網路存取控制、沙箱執行與可觀測性： 企業導入建議 ：導入 Agent 功能前，建議資安團隊優先評估 ChatAgentNetworkFilter （網域白名單）、 ChatAgentSandboxEnabled （沙箱隔離）與 ChatAllowManagedMcpServersOnly （MCP 供應鏈控管）三項原則，作為降低 Agent 對外部系統誤操作風險的第一道防線；OTel 匯出功能則可協助建立 Agent 操作的稽核與合規紀錄。 6.9.3 網路與代理伺服器設定 # 必要對外連線網域（防火牆允許清單）： VS Code 預設會直接沿用作業系統的 Proxy 設定；企業網路若採用自簽憑證，須額外設定信任的憑證鏈結。 7.1 常見問題 (FAQ) 與解決方式 # 7.1.1 安裝與設定問題 # Q1: VS Code 啟動速度很慢 檢查安裝的擴充功能數量，移除不必要的擴充功能 清理 VS Code 快取： # 關閉 VS Code 後執行 Remove-Item -Recurse -Force "$env:APPDATA\Code\User\workspaceStorage" Remove-Item -Recurse -Force "$env:APPDATA\Code\CachedExtensions" 使用 Developer: Reload Window 重新載入視窗 查看 Output 面板的錯誤訊息 Q3: Java 專案無法正確識別 確認已安裝 “Extension Pack for Java” 檢查 Java 版本： java -version 重新匯入專案： Ctrl + Shift + P → Java: Reload Projects 檢查 .vscode/settings.json 中的 Java 路徑設定 確認檔案監視功能正常： # 增加檔案監視限制 echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf 檢查 Git 是否正確安裝： git --version 設定 Git 使用者資訊： git config --global user.name "Your Name" git config --global user.email "your.email@company.com" 檢查 launch.json 設定是否正確 查看 Debug Console 的錯誤訊息 7.1.3 效能最佳化問題 # 排除大型檔案和資料夾： { "files.exclude": { "**/node_modules": true, "**/target": true, "**/.git": true, "**/dist": true } } 調整 TypeScript 服務設定： { "typescript.suggest.enabled": false, "typescript.validate.enable": false } 7.2.2 程式碼品質習慣 # 1. 定期 Commit 習慣 建立 Pull Request 進行程式碼審查 使用 GitHub/GitLab 的審查功能 7.2.3 工作區管理習慣 # 使用 VS Code 設定同步功能 7.3.1 編輯器效能優化 # 推薦功能 — Sticky Scroll ：啟用 "editor.stickyScroll.enabled": true 可在捲動時將目前的類別、函式等作用域標題固定在編輯器頂部，方便瀏覽大型檔案。 VS Code 設定檔案保護： 將敏感設定加入 .gitignore ： # 敏感設定檔 .env .env.local .env.production application-prod.properties # VS Code 敏感設定 .vscode/settings.json 使用 .env.example 提供範本 定期檢查是否有敏感資訊被提交： # 掃描歷史提交中的敏感資訊 git log --all --full-history -- **/*.env 7.4.2 憑證與金鑰管理 # GitHub/GitLab 存取權杖安全： 使用 Windows 憑證管理員 SonarLint 擴充功能：即時程式碼品質檢查 GitHub Dependabot alerts：自動依賴安全警告 GitLab Dependency Scanning ：CI/CD 整合掃描 OWASP Dependency Check ：開源依賴漏洞檢查 7.4.4 程式碼掃描與分析 # 7.4.6 工作區信任 (Workspace Trust) # VS Code 的 Workspace Trust 功能可防止不受信任的程式碼自動執行，保護開發環境安全。 開啟新資料夾時，VS Code 會詢問是否信任該工作區 受信任模式 ：所有功能正常運作（擴充功能、終端機、偵錯、任務等） 受限模式 ：停用可能執行程式碼的功能（如自動格式化、任務執行、部分擴充功能） Ctrl + Shift + P → Workspaces: Manage Workspace Trust 在設定中新增信任的父資料夾路徑 信任父資料夾後，其所有子資料夾自動受信任 建議 ：將你的開發主目錄（如 D:\developer\repos ）設為信任資料夾，避免每次開啟專案都要確認。 7.5.2 程式碼審查流程 # 架構設計 ：是否符合專案架構原則 程式碼品質 ：可讀性、維護性、複用性 效能考量 ：演算法效率、資源使用 安全性 ：輸入驗證、權限檢查、敏感資料處理 測試覆蓋 ：單元測試、整合測試 文件完整性 ：註解、README、API 文件 8.1 新進成員快速上手檢查清單 # 安裝 Visual Studio Code 安裝 Node.js (版本 20+ LTS) 安裝 Java (版本 17+) 安裝 Maven (獨立安裝或使用內建版本) 設定 JAVA_HOME 環境變數 設定 MAVEN_HOME 環境變數 (獨立安裝時) 設定 maven.executable.path 指向正確的 Maven 執行檔 設定 maven.terminal.customEnv 環境變數 設定 Maven settings.xml 路徑 驗證 Maven 版本： mvn -version 測試 Maven 專案載入功能 安裝推薦字型 (JetBrains Mono 或 Fira Code) Chinese (Traditional) Language Pack Auto Rename Tag Path Intellisense Volar (Vue Language Features) TypeScript Importer Tailwind CSS IntelliSense Extension Pack for Java Spring Boot Extension Pack Checkstyle for Java GitHub Copilot（已含 Copilot Chat） 執行 /init 初始化專案 AI 設定 設定 .github/copilot-instructions.md 指示檔 視需要設定 MCP 伺服器（ .vscode/mcp.json ） 建立 .vscode/settings.json 建立 .vscode/extensions.json 建立 .vscode/launch.json 建立 .vscode/tasks.json 設定專案特定的程式碼格式化規則 連結 GitHub/GitLab 帳號 設定 .gitignore 檔案 更新到最新的 VS Code 版本 驗證 CI/CD Pipeline 通過 移除開發用的 debug 模式 GitHub Actions 或 GitLab CI/CD Pipeline 成功執行 重新載入視窗 ( Developer: Reload Window ) 檢查 Node.js/Java 版本 檢查 Git 狀態： git status Visual Studio Code 官方文件 Getting Started 總覽 Source Control 總覽 Spring Boot 官方文件 TypeScript 官方文件 AI / Agent 相關文件： Build with agents in VS Code（總覽） GitHub Copilot 安裝與設定 AI Features Cheat Sheet Custom Instructions MCP Servers 設定指南 Language Models（模型選擇與 BYOK） GitHub Copilot 方案 VS Code 最新 Release Notes VS Code for Enterprise 總覽 Enterprise 原則參考 Extension API 總覽 VS Code Tips and Tricks Java 在 VS Code 中的使用 TypeScript 開發指南 Remote Development 指南 Dev Containers 指南 VS Code Profiles Workspace Trust VS Code Extension Marketplace GitHub VS Code Repository VS Code YouTube Channel Remote Development Extension Pack 文件時效性提醒 ：本節連結均於 2026 年 8 月查證有效；GitHub Copilot 相關功能迭代速度遠快於 VS Code 核心版本（約每月更新），建議讀者以 VS Code Release Notes 及 GitHub Changelog 的「GitHub Copilot in Visual Studio Code」系列文章掌握最新異動。 文件版本：5.0 最後更新：2026年8月24日 維護團隊：開發部技術團隊