Visual Studio Code 使用教學手冊

完整的 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 安裝與環境設定

2. 專案開發環境配置

3. 日常開發操作

4. 專案特定開發流程指引

5. 協作開發功能

6. 進階功能與擴充

7. 最佳實務

8. 檢查清單

9. 附錄


1. VS Code 安裝與環境設定

1.1 安裝步驟

1.1.1 下載與安裝

  1. 前往 Visual Studio Code 官方網站
  2. 點擊 “Download for Windows” 下載安裝檔
  3. 執行安裝檔,建議勾選以下選項:
    • ✅ 新增至 PATH (在重新啟動後可用)
    • ✅ 在檔案總管中的檔案上顯示「使用 Code 開啟」動作
    • ✅ 在檔案總管中的目錄上顯示「使用 Code 開啟」動作
    • ✅ 將 Code 註冊為支援的檔案類型的編輯器

1.1.2 首次啟動設定

  1. 啟動 VS Code
  2. 選擇適合的色彩主題
  3. 登入 Microsoft 帳戶(可選,用於同步設定)

1.2 推薦字型與主題

1.2.1 推薦字型

建議安裝並使用以下等寬字型:

主要推薦:

  • JetBrains Mono - 專為程式設計設計,支援連字符
  • Fira Code - 支援程式設計連字符,提升程式碼可讀性
  • Cascadia Code - Microsoft 開發的程式設計字型

安裝步驟:

  1. 下載字型檔案(.ttf 或 .otf)
  2. 右鍵點擊字型檔案 → 選擇「安裝」
  3. 在 VS Code 中設定字型

VS Code 字型設定:

{
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.fontWeight": "400"
}

1.2.2 推薦主題

根據不同喜好推薦以下主題:

暗色主題:

  • 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 環境零安裝門檻)皆為社群常見選擇,可依團隊喜好調整,非強制規範。

安裝主題步驟:

  1. 按 Ctrl + Shift + X 開啟擴充功能面板
  2. 搜尋主題名稱
  3. 點擊「Install」安裝
  4. 按 Ctrl + K, Ctrl + T 選擇主題

1.3 專案必要的 Extensions 清單

1.3.1 基礎開發工具

必裝擴充功能:

擴充功能名稱用途安裝指令
Chinese (Traditional) Language Pack繁體中文語言包ext install MS-CEINTL.vscode-language-pack-zh-hant
GitLensGit 進階功能增強ext install eamodio.gitlens
GitHub Pull Requests and IssuesGitHub 整合ext install GitHub.vscode-pull-request-github
GitLab WorkflowGitLab 整合ext install gitlab.gitlab-workflow
Auto Rename TagHTML/XML 標籤自動重新命名ext install formulahendry.auto-rename-tag
Bracket Pair Colorization (內建)括號配對色彩化(VS Code v1.60+ 已內建,無需安裝)設定 "editor.bracketPairColorization.enabled": true
indent-rainbow縮排色彩化ext install oderwat.indent-rainbow
Path Intellisense路徑自動完成ext install christian-kohler.path-intellisense

1.3.2 前端開發 (Vue 3 + TypeScript)

擴充功能名稱用途安裝指令
Vue - Official (Volar)Vue.js 語言支援(Vetur 已棄用,請使用 Volar)ext install Vue.volar
TypeScript ImporterTypeScript 自動匯入ext install pmneo.tsimporter
ESLintJavaScript/TypeScript 程式碼檢查ext install dbaeumer.vscode-eslint
Prettier程式碼格式化工具ext install esbenp.prettier-vscode
Tailwind CSS IntelliSenseTailwind CSS 自動完成ext install bradlc.vscode-tailwindcss
Auto Close TagHTML 標籤自動閉合ext install formulahendry.auto-close-tag
HTML CSS SupportHTML 中的 CSS 支援ext install ecmel.vscode-html-css

1.3.3 後端開發 (Java + Spring Boot)

擴充功能名稱用途安裝指令
Extension Pack for JavaJava 開發工具包ext install vscjava.vscode-java-pack
Spring Boot Extension PackSpring Boot 開發工具包ext install Pivotal.vscode-boot-dev-pack
Maven for JavaMaven 專案管理ext install vscjava.vscode-maven
Checkstyle for JavaJava 程式碼風格檢查ext install shengchen.vscode-checkstyle
SonarLint程式碼品質分析ext install SonarSource.sonarlint-vscode

1.3.4 Python 開發

擴充功能名稱用途安裝指令
PythonPython 官方開發工具ext install ms-python.python
PylancePython 智能感知與型別檢查ext install ms-python.vscode-pylance
RuffPython Linter 與格式化工具(取代 Pylint、Flake8、Black、isort)ext install charliermarsh.ruff
Python Docstring Generator自動產生文檔字串ext install njpwerner.autodocstring
JupyterJupyter Notebook 支援ext install ms-toolsai.jupyter
Python DebuggerPython 偵錯工具ext install ms-python.debugpy

1.3.5 AI 輔助開發

擴充功能名稱用途安裝指令
GitHub CopilotAI 程式碼自動完成、對話式助手、Agent 模式(已內含 Copilot Chat)ext install GitHub.copilot

說明:自 2025 年下半年起,GitHub Copilot Chat 已合併至 GitHub Copilot 擴充功能,不再需要單獨安裝。Copilot 提供免費方案(每月有使用限制),也可訂閱付費方案享有完整功能,包括 Agent 模式、MCP 伺服器整合等進階功能。詳情請參閱 GitHub Copilot 方案。

1.3.6 一鍵安裝指令

在 VS Code 終端機中執行以下指令快速安裝所有推薦擴充功能:

# 基礎工具
code --install-extension MS-CEINTL.vscode-language-pack-zh-hant
code --install-extension eamodio.gitlens
code --install-extension GitHub.vscode-pull-request-github
code --install-extension gitlab.gitlab-workflow
code --install-extension formulahendry.auto-rename-tag
code --install-extension oderwat.indent-rainbow
code --install-extension christian-kohler.path-intellisense

# 前端開發
code --install-extension Vue.volar
code --install-extension pmneo.tsimporter
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension formulahendry.auto-close-tag
code --install-extension ecmel.vscode-html-css

# 後端開發
code --install-extension vscjava.vscode-java-pack
code --install-extension Pivotal.vscode-boot-dev-pack
code --install-extension vscjava.vscode-maven
code --install-extension shengchen.vscode-checkstyle
code --install-extension SonarSource.sonarlint-vscode

# Python 開發
code --install-extension ms-python.python
code --install-extension ms-python.vscode-pylance
code --install-extension charliermarsh.ruff
code --install-extension njpwerner.autodocstring
code --install-extension ms-toolsai.jupyter
code --install-extension ms-python.debugpy

# AI 輔助開發(Copilot Chat 已內含於 Copilot 擴充功能中)
code --install-extension GitHub.copilot

1.4 設定同步功能

1.4.1 啟用設定同步

VS Code 提供設定同步功能,讓您在不同設備間保持一致的開發環境。

啟用步驟:

  1. 點擊左下角管理圖示(齒輪)或活動列的帳戶圖示
  2. 選擇 Turn on Settings Sync...
  3. 選擇要同步的項目:
    • ✅ 設定 (Settings)
    • ✅ 快捷鍵綁定 (Keybindings)
    • ✅ 擴充功能 (Extensions)
    • ✅ 使用者程式碼片段 (User Snippets)
    • ✅ 使用者工作 (User Tasks)
    • ✅ UI 狀態 (UI State)
    • ✅ 設定檔 (Profiles)
  4. 使用 Microsoft 帳戶或 GitHub 帳戶登入

注意:Settings Sync 目前不支援 GitHub Enterprise 帳戶登入;企業環境如需集中管理設定,請改用第 6.9 節介紹的原則 (Policy) 機制。

1.4.2 同步項目說明

同步的內容包括:

  • 設定檔 - editor、theme、font 等個人偏好設定
  • 擴充功能 - 已安裝的擴充功能清單
  • 快捷鍵 - 自訂的快捷鍵綁定
  • 程式碼片段與工作 - 自訂的程式碼片段、User Tasks
  • UI 狀態 - 面板配置、視窗大小等
  • 設定檔 (Profiles) - 完整的 Profile 組合(含各 Profile 專屬的擴充功能與設定)

不會同步的內容:

  • 工作區特定設定(.vscode/settings.json)
  • 標記為 machine 或 machine-overridable 範圍的機器專屬設定
  • 本地檔案路徑
  • 敏感資訊(如 tokens、密碼)

提示:連線到遠端視窗(Remote-SSH、Dev Containers、WSL)時,Settings Sync 不會同步擴充功能到該遠端環境,須於遠端另行安裝所需擴充功能。

1.4.3 管理同步設定

查看同步狀態:

  • 點擊狀態列的同步圖示
  • 或按 Ctrl + Shift + P → Settings Sync: Show Settings

手動同步:

Ctrl + Shift + P:
- Settings Sync: Sync Now
- Settings Sync: Download Settings
- Settings Sync: Upload Settings

關閉同步:

  • Ctrl + Shift + P → Settings Sync: Turn Off

1.5 實務案例與注意事項

⚠️ 注意事項

  1. 效能考量:不要安裝過多不必要的擴充功能,會影響 VS Code 啟動速度
  2. 版本相容性:定期更新擴充功能,確保與 VS Code 版本相容
  3. 工作區設定:某些擴充功能設定建議在工作區層級配置,避免影響其他專案

💡 實務建議

  • 使用 Ctrl + Shift + P 開啟命令面板,輸入 Extensions: Show Recommended Extensions 查看工作區推薦的擴充功能
  • 定期執行 Extensions: Update All Extensions 更新所有擴充功能
  • 使用設定同步功能,在不同設備間保持一致的開發環境

2. 專案開發環境配置

2.1 如何開啟專案

2.1.1 開啟專案的方式

方式一:透過檔案總管

  1. 在專案根目錄右鍵點擊
  2. 選擇「使用 Code 開啟」

方式二:透過 VS Code

  1. 啟動 VS Code
  2. 按 Ctrl + K, Ctrl + O 或選擇 File > Open Folder
  3. 選擇專案根目錄

方式三:透過命令列

# 在專案根目錄執行
cd d:\developer\repos\your-project
code .

2.1.2 專案結構確認

正確開啟專案後,應該看到以下結構:

your-project/
├── frontend/          # Vue 3 前端專案
│   ├── src/
│   ├── package.json
│   └── vite.config.ts
├── backend/           # Spring Boot 後端專案
│   ├── src/
│   ├── pom.xml
│   └── application.yml
├── .vscode/           # VS Code 工作區設定
├── README.md
└── .gitignore

2.2 前端、後端工作區設定 (Workspace Settings)

2.2.1 建立工作區設定檔

在專案根目錄建立 .vscode 資料夾,並創建以下設定檔:

.vscode/settings.json - 工作區設定

{
  // 編輯器設定
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/.git": true,
    "**/.DS_Store": true
  },
  
  // 前端專案設定
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // 後端專案設定
  "[java]": {
    "editor.defaultFormatter": "redhat.java",
    "editor.tabSize": 4
  },
  "[xml]": {
    "editor.defaultFormatter": "redhat.vscode-xml"
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  
  // Java 相關設定
  "java.configuration.updateBuildConfiguration": "automatic",
  "java.compile.nullAnalysis.mode": "automatic",
  "java.format.settings.url": ".vscode/eclipse-formatter.xml",
  "java.checkstyle.configuration": ".vscode/checkstyle.xml",
  
  // Maven 相關設定 (獨立安裝)
  "maven.executable.path": "D:\\apache-maven-3.9.4\\bin\\mvn.cmd",
  "maven.terminal.useJavaHome": true,
  "maven.terminal.customEnv": [
    {
      "environmentVariable": "JAVA_HOME",
      "value": "C:\\Program Files\\Java\\jdk-17"
    },
    {
      "environmentVariable": "M2_HOME", 
      "value": "D:\\apache-maven-3.9.4"
    }
  ],
  "maven.view": "hierarchical",
  "maven.pomfile.autoUpdateEffectivePOM": true,
  "maven.pomfile.globalSettings": "D:\\apache-maven-3.9.4\\conf\\settings.xml",
  "maven.pomfile.userSettings": "${env:USERPROFILE}\\.m2\\settings.xml",
  "maven.offline": false,
  "maven.updateSnapshots": false,
  "maven.showDependencies": "all",
  
  // Python 相關設定(使用新版擴充功能取代已棄用的 python.linting/formatting 設定)
  "python.defaultInterpreterPath": "python",
  "python.analysis.typeCheckingMode": "basic",
  "python.analysis.autoImportCompletions": true,
  "python.testing.pytestEnabled": true,
  "python.testing.unittestEnabled": false,
  "jupyter.askForKernelRestart": false,
  "jupyter.alwaysTrustNotebooks": true,
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.fixAll": "explicit"
    },
    "editor.tabSize": 4
  },
  
  // ESLint 設定
  "eslint.workingDirectories": ["frontend"],
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ],
  
  // Prettier 設定
  "prettier.configPath": "frontend/.prettierrc",
  
  // 搜尋設定
  "search.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/dist": true,
    "**/.git": true
  }
}

.vscode/extensions.json - 推薦擴充功能

{
  "recommendations": [
    // 基礎工具
    "ms-ceintl.vscode-language-pack-zh-hant",
    "eamodio.gitlens",
    "formulahendry.auto-rename-tag",
    "oderwat.indent-rainbow",
    "christian-kohler.path-intellisense",
    
    // 前端開發
    "vue.volar",
    "pmneo.tsimporter",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-close-tag",
    "ecmel.vscode-html-css",
    
    // 後端開發
    "vscjava.vscode-java-pack",
    "pivotal.vscode-boot-dev-pack",
    "vscjava.vscode-maven",
    "shengchen.vscode-checkstyle",
    "sonarsource.sonarlint-vscode"
  ]
}

.vscode/launch.json - 偵錯設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Vue App",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/frontend",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"]
    },
    {
      "name": "Launch Spring Boot",
      "type": "java",
      "request": "launch",
      "mainClass": "com.yourcompany.Application",
      "projectName": "your-backend-project",
      "args": "--spring.profiles.active=dev"
    },
    {
      "name": "Debug Vue Tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/frontend",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "test:debug"]
    },
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    },
    {
      "name": "Python: FastAPI",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/src/main.py",
      "console": "integratedTerminal",
      "args": ["--reload"]
    },
    {
      "name": "Python: Flask",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "env": {
        "FLASK_APP": "app.py",
        "FLASK_ENV": "development"
      },
      "args": ["run", "--host=0.0.0.0", "--port=5000"],
      "jinja": true,
      "justMyCode": true
    },
    {
      "name": "Python: Django",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver"],
      "console": "integratedTerminal",
      "justMyCode": true
    }
  ]
}

.vscode/tasks.json - 任務設定

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend: Install Dependencies",
      "type": "shell",
      "command": "npm",
      "args": ["install"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "Frontend: Dev Server",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "new"
      }
    },
    {
      "label": "Frontend: Build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build"
    },
    {
      "label": "Frontend: Test",
      "type": "shell",
      "command": "npm",
      "args": ["run", "test"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "test"
    },
    {
      "label": "Backend: Maven Clean Install",
      "type": "shell",
      "command": "mvn",
      "args": ["clean", "install"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "build"
    },
    {
      "label": "Backend: Maven Spring Boot Run",
      "type": "shell",
      "command": "mvn",
      "args": ["spring-boot:run"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "build",
      "isBackground": true
    },
    {
      "label": "Backend: Maven Test",
      "type": "shell",
      "command": "mvn",
      "args": ["test"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "test"
    }
  ]
}

2.3 編碼規範設定

2.3.1 前端編碼規範 (ESLint + Prettier)

frontend/.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    '@vue/typescript/recommended',
    'prettier'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2021,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint',
    'vue'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-unused-vars': 'error',
    'vue/multi-word-component-names': 'off',
    'vue/no-v-html': 'warn'
  }
}

frontend/.prettierrc

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf"
}

2.3.2 後端編碼規範 (Checkstyle)

backend/.vscode/checkstyle.xml

<?xml version="1.0"?>
<!DOCTYPE module PUBLIC "-//Checkstyle//DTD Checkstyle Configuration 1.3//EN"
    "https://checkstyle.org/dtds/configuration_1_3.dtd">
<module name="Checker">
  <property name="charset" value="UTF-8"/>
  <property name="severity" value="warning"/>
  
  <module name="TreeWalker">
    <!-- 命名規則 -->
    <module name="TypeName"/>
    <module name="MethodName"/>
    <module name="PackageName"/>
    <module name="ParameterName"/>
    <module name="LocalVariableName"/>
    
    <!-- 程式碼風格 -->
    <module name="LineLength">
      <property name="max" value="120"/>
    </module>
    <module name="Indentation">
      <property name="basicOffset" value="4"/>
    </module>
    
    <!-- 匯入規則 -->
    <module name="UnusedImports"/>
    <module name="RedundantImport"/>
    <module name="IllegalImport"/>
    
    <!-- 空白規則 -->
    <module name="WhitespaceAfter"/>
    <module name="WhitespaceAround"/>
  </module>
</module>

2.3.3 Maven 獨立安裝設定

安裝 Maven:

  1. 從 Apache Maven 官網 下載最新版本
  2. 解壓縮到指定目錄,例如:D:\apache-maven-3.9.4
  3. 設定系統環境變數:
    MAVEN_HOME=D:\apache-maven-3.9.4
    M2_HOME=D:\apache-maven-3.9.4
    PATH=%PATH%;%MAVEN_HOME%\bin

VS Code Maven 設定:

// .vscode/settings.json
{
  // Maven 執行檔路徑設定
  "maven.executable.path": "D:\\apache-maven-3.9.4\\bin\\mvn.cmd",
  
  // 使用 JAVA_HOME 環境變數
  "maven.terminal.useJavaHome": true,
  
  // 自訂環境變數
  "maven.terminal.customEnv": [
    {
      "environmentVariable": "JAVA_HOME",
      "value": "C:\\Program Files\\Java\\jdk-17"
    },
    {
      "environmentVariable": "M2_HOME", 
      "value": "D:\\apache-maven-3.9.4"
    },
    {
      "environmentVariable": "MAVEN_OPTS",
      "value": "-Xmx1024m -XX:MaxPermSize=256m"
    }
  ],
  
  // Maven 檢視設定
  "maven.view": "hierarchical",
  "maven.pomfile.autoUpdateEffectivePOM": true,
  
  // Maven 設定檔路徑
  "maven.pomfile.globalSettings": "D:\\apache-maven-3.9.4\\conf\\settings.xml",
  "maven.pomfile.userSettings": "${env:USERPROFILE}\\.m2\\settings.xml",
  
  // Maven 操作設定
  "maven.offline": false,
  "maven.updateSnapshots": false,
  "maven.showDependencies": "all",
  "maven.excludedFolders": [
    "**/.*",
    "**/node_modules",
    "**/target",
    "**/bin",
    "**/archetype-resources"
  ],
  
  // Maven 編譯設定
  "maven.runtime.settings": "${env:USERPROFILE}\\.m2\\settings.xml",
  "maven.multiModuleProjectDirectory": "${workspaceFolder}",
  "maven.projectOpenBehavior": "Interactive"
}

Maven 專案任務設定:

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Maven: Clean",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["clean"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "Maven: Compile",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["compile"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Test",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["test"],
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Package",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["package", "-DskipTests"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Install",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["install"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    },
    {
      "label": "Maven: Spring Boot Run",
      "type": "shell",
      "command": "${config:maven.executable.path}",
      "args": ["spring-boot:run"],
      "group": "build",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": "\\b\\B",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": "^.*Restarting due to",
            "endsPattern": "^.*Started .* in .* seconds.*"
          }
        }
      ]
    }
  ]
}

Maven Wrapper 設定 (推薦): 如果專案使用 Maven Wrapper,可以使用以下設定:

// .vscode/settings.json
{
  "maven.executable.path": "${workspaceFolder}/mvnw.cmd",
  "maven.executable.preferMavenWrapper": true
}

驗證 Maven 設定:

  1. 開啟 VS Code 命令面板:Ctrl + Shift + P
  2. 執行:Java: Reload Projects
  3. 檢查 Maven 擴充功能是否正常載入專案
  4. 在終端執行:mvn -version 確認版本正確

2.4 容器化開發環境 (Dev Containers)

2.4.1 Dev Containers 簡介

Dev Containers 讓團隊在一致的容器化環境中開發,確保 “在我的機器上可以運行” 的問題不再發生。

優勢:

  • 統一的開發環境
  • 快速環境建置
  • 隔離的依賴管理
  • 支援不同的技術堆疊

2.4.2 設定 Dev Container

1. 安裝必要擴充功能:

code --install-extension ms-vscode-remote.remote-containers

2. 建立 .devcontainer 資料夾:

.devcontainer/
├── devcontainer.json
├── Dockerfile
└── docker-compose.yml

3. 配置 devcontainer.json:

{
  "name": "Full Stack Development",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "shutdownAction": "stopCompose",
  
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "vue.volar",
        "vscjava.vscode-java-pack",
        "pivotal.vscode-boot-dev-pack"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        }
      }
    }
  },
  
  "forwardPorts": [3000, 8080, 3306],
  "postCreateCommand": "npm install && mvn install"
}

開放規格:devcontainer.json 遵循開放的 Dev Container Specification,設定可跨 VS Code、GitHub Codespaces 等多種工具通用。

生命週期腳本執行順序:

devcontainer.json 支援六個依序執行的生命週期指令,適合將依賴安裝、資料庫初始化等步驟拆分到對應階段:

順序屬性執行時機
1initializeCommand容器建立前,於主機端執行
2onCreateCommand容器建立時執行一次
3updateContentCommand內容更新時執行(例如重新開啟時)
4postCreateCommand容器建立完成後執行一次
5postStartCommand每次容器啟動後執行
6postAttachCommand每次 VS Code 連接到容器後執行

Features(功能模組):可透過 features 屬性以宣告方式加入自足式的安裝單元(例如 CLI 工具),以 OCI Artifact 形式從公開或私有登錄庫散布:

{
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  }
}

亦可用 dev.containers.defaultFeatures 使用者設定,讓所有容器預設安裝特定 Features。

4. Docker Compose 設定:

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ..:/workspace:cached
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      - "3000:3000"
      - "8080:8080"
    environment:
      - NODE_ENV=development
    depends_on:
      - database
  
  database:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: devdb
      MYSQL_USER: devuser
      MYSQL_PASSWORD: devpassword
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

2.4.3 使用 Dev Container

啟動 Dev Container:

  1. 按 Ctrl + Shift + P
  2. 輸入 Dev Containers: Reopen in Container
  3. 等待容器建置完成

常用 Dev Container 指令:

Ctrl + Shift + P:
- Dev Containers: Rebuild Container
- Dev Containers: Reopen Locally
- Dev Containers: Show Container Log

2.5 實務案例與注意事項

⚠️ 注意事項

  1. 設定檔版本控制:將 .vscode 資料夾加入版本控制,確保團隊成員使用相同設定
  2. 路徑設定:確保所有路徑設定符合專案實際結構
  3. 效能最佳化:定期清理不必要的設定,避免影響 VS Code 效能

💡 實務建議

  • 使用 Ctrl + Shift + P 執行 Developer: Reload Window 重新載入設定
  • 定期執行 Preferences: Workspace Settings 檢查設定是否正確
  • 建議將常用任務加入 VS Code 的任務面板快速存取

3. 日常開發操作

3.1 Git 與 GitHub/GitLab 整合

3.1.1 Git 基本操作

透過 VS Code Git 面板操作:

  1. 查看變更檔案

    • 按 Ctrl + Shift + G 開啟 Git 面板
    • 檢視 “Changes” 區段的修改檔案
  2. 暫存變更

    • 點擊檔案旁的 + 號暫存單一檔案
    • 點擊 “Changes” 旁的 + 暫存所有變更
  3. 提交變更

    • 在訊息框輸入提交訊息,或點擊訊息框上方的閃光圖示由 AI 依變更內容自動產生提交訊息建議
    • 按 Ctrl + Enter 或點擊 ✓ 提交
  4. 推送到遠端

    • 點擊狀態列的同步按鈕
    • 或按 Ctrl + Shift + P → Git: Push

原生進階版本控制功能:

功能說明
Source Control Graph於 Source Control 面板下方以視覺化圖形檢視提交歷史與分支關係
Timeline 檢視於檔案總管底部檢視單一檔案的完整變更歷程(含提交、儲存點)
Worktrees 支援在同一份倉庫下同時建立多個工作目錄,方便平行處理不同分支而不必反覆切換
Stash 管理於 Source Control 面板直接建立、檢視、還原 Git Stash

3.1.2 GitLens 擴充功能使用

主要功能:

  • 檔案歷史檢視:點擊編輯器中的 GitLens 註解
  • 比較變更:右鍵檔案 → Compare with Previous
  • Blame 檢視:查看每行程式碼的修改者和時間
  • 分支檢視:在側邊欄檢視所有分支和提交歷史

常用 GitLens 指令:

Ctrl + Shift + P:
- GitLens: Show File History
- GitLens: Compare with Previous
- GitLens: Show Line History
- GitLens: Toggle File Blame

3.1.3 GitHub/GitLab 整合設定

GitHub 整合:

  1. 安裝 “GitHub Pull Requests and Issues” 擴充功能
  2. 按 Ctrl + Shift + P → GitHub: Sign In
  3. 完成授權後即可在 VS Code 中:
    • 檢視和建立 Pull Request
    • 管理 Issues
    • 進行 Code Review

常用 GitHub 操作:

  • Ctrl + Shift + P → GitHub: Create Pull Request
  • 在 Explorer 面板中直接檢視 PR 狀態
  • 在編輯器中直接回覆 PR 評論

GitLab 整合:

  1. 安裝 “GitLab Workflow” 擴充功能:

    code --install-extension gitlab.gitlab-workflow
  2. 設定 GitLab 存取權杖:

    • 前往 GitLab → User Settings → Access Tokens
    • 建立 Personal Access Token,權限包含:
      • api - 完整 API 存取
      • read_user - 讀取使用者資訊
      • read_repository - 讀取倉庫資訊
  3. 在 VS Code 中設定 GitLab:

    // settings.json
    {
      "gitlab.instanceUrl": "https://gitlab.yourcompany.com",
      "gitlab.personalAccessToken": "your-access-token",
      "gitlab.showPipelineUpdateNotifications": true,
      "gitlab.enableExperimentalFeatures": true
    }

GitLab 主要功能:

  • Merge Request 管理:檢視、建立和審查 MR
  • Pipeline 狀態:即時檢視 CI/CD Pipeline 狀態
  • Issue 追蹤:管理 GitLab Issues
  • 程式碼審查:在 VS Code 中進行 MR 審查
  • 分支管理:建立和切換 GitLab 分支

常用 GitLab 操作:

Ctrl + Shift + P:
- GitLab: Create Merge Request
- GitLab: Show Issues
- GitLab: Show Merge Requests
- GitLab: Open in GitLab
- GitLab: Compare with Base

GitLab CI/CD 整合:

  1. 檢視 Pipeline 狀態:

    • 在狀態列顯示目前分支的 Pipeline 狀態
    • 點擊可直接開啟 GitLab Pipeline 頁面
  2. 建立 .gitlab-ci.yml 檔案支援:

    • 語法高亮和自動完成
    • 即時語法檢查
    • 範本片段支援

GitLab 與 GitHub 比較:

功能GitHubGitLab
Pull/Merge RequestPull RequestMerge Request
CI/CDGitHub ActionsGitLab CI/CD
專案管理Projects, IssuesIssues, Milestones, Boards
容器註冊表GitHub PackagesGitLab Container Registry
安全掃描GitHub SecurityGitLab Security Dashboard

3.1.4 內建三方合併編輯器

VS Code 內建了三方合併編輯器 (3-way Merge Editor),可視覺化解決 Git 合併衝突:

啟用方式:

{
  "git.mergeEditor": true
}

使用方式:

  1. 發生合併衝突時,在 Git 面板點擊衝突檔案
  2. 選擇 Resolve in Merge Editor
  3. 上方顯示「來源」與「目標」兩個分支的版本,下方為合併結果
  4. 使用 Accept Incoming / Accept Current / Accept Both 按鈕選擇保留的內容,或使用 AI 輔助衝突解決選項讓 Copilot 依上下文提出建議合併結果
  5. 完成後點擊 Complete Merge

3.2 常用快捷鍵

3.2.1 檔案操作

快捷鍵功能說明
Ctrl + N新增檔案建立新的未命名檔案
Ctrl + O開啟檔案開啟檔案對話框
Ctrl + S儲存檔案儲存目前檔案
Ctrl + Shift + S另存新檔另存新檔對話框
Ctrl + W關閉分頁關閉目前編輯器分頁
Ctrl + Shift + T重開分頁重新開啟最近關閉的分頁
Ctrl + Tab切換分頁在開啟的分頁間切換
Ctrl + P快速開啟快速搜尋並開啟檔案

3.2.2 編輯操作

快捷鍵功能說明
Ctrl + Z復原復原上一個動作
Ctrl + Y重做重做被復原的動作
Ctrl + X剪下剪下選取的文字
Ctrl + C複製複製選取的文字
Ctrl + V貼上貼上剪貼簿內容
Ctrl + A全選選取所有內容
Ctrl + F搜尋在目前檔案中搜尋
Ctrl + H取代搜尋並取代
Ctrl + Shift + F全域搜尋在整個專案中搜尋

3.2.3 程式碼編輯

快捷鍵功能說明
Ctrl + /切換註解註解/取消註解選取的行
Shift + Alt + A區塊註解切換區塊註解
Alt + Up/Down移動行向上/向下移動目前行
Shift + Alt + Up/Down複製行向上/向下複製目前行
Ctrl + Shift + K刪除行刪除目前行
Ctrl + Enter插入新行在下方插入新行
Ctrl + Shift + Enter插入新行在上方插入新行
Ctrl + ]增加縮排增加選取內容的縮排
Ctrl + [減少縮排減少選取內容的縮排

3.2.4 進階操作

快捷鍵功能說明
Ctrl + Shift + P命令面板開啟命令面板
Ctrl + Shift + E檔案總管切換到檔案總管
Ctrl + Shift + GGit 面板切換到 Git 面板
Ctrl + Shift + X擴充功能切換到擴充功能面板
Ctrl + Shift + D偵錯面板切換到偵錯面板
Ctrl + ` (反引號)終端機切換終端機面板
F11全螢幕切換全螢幕模式
Ctrl + K, Z禪模式進入專注模式

3.3 偵錯 (Debugging) 與斷點設定

3.3.1 設定斷點

基本斷點操作:

  1. 新增斷點:在行號左側點擊,或按 F9
  2. 條件斷點:右鍵點擊斷點 → “Edit Breakpoint” → 設定條件
  3. 日誌斷點:在斷點不暫停的情況下輸出訊息
  4. 移除斷點:再次點擊斷點,或按 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 等瀏覽器偵錯,無需額外安裝擴充功能。

  1. 在 launch.json 中配置:
{
  "name": "Vue App Debug",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/frontend/src",
  "sourceMaps": true
}

偵錯步驟:

  1. 啟動開發伺服器:npm run dev
  2. 在程式碼中設定斷點
  3. 按 F5 啟動偵錯
  4. 在瀏覽器中觸發相關功能

3.3.3 後端偵錯 (Spring Boot)

Java 偵錯設定: 在 launch.json 中配置:

{
  "name": "Spring Boot Debug",
  "type": "java",
  "request": "launch",
  "mainClass": "com.yourcompany.Application",
  "projectName": "your-backend-project",
  "args": "--spring.profiles.active=dev",
  "vmArgs": "-Dspring.profiles.active=dev"
}

偵錯步驟:

  1. 在 Java 程式碼中設定斷點
  2. 按 F5 啟動偵錯模式
  3. 透過 API 測試工具觸發相關端點
  4. 程式會在斷點處暫停

3.3.4 偵錯控制快捷鍵

快捷鍵功能說明
F5開始偵錯啟動偵錯或繼續執行
Shift + F5停止偵錯停止偵錯工作階段
Ctrl + Shift + F5重新啟動重新啟動偵錯工作階段
F10逐步執行執行下一行(不進入函式)
F11逐步進入執行下一行(進入函式)
Shift + F11逐步離開離開目前函式
F9切換斷點在目前行新增/移除斷點

3.4 終端機與多工作區使用

3.4.1 終端機基本操作

開啟終端機:

  • 按 Ctrl + ` (反引號)
  • 或選擇 Terminal > New Terminal

終端機管理:

  • 新增終端機:點擊終端機面板的 + 號
  • 切換終端機:點擊終端機標籤
  • 分割終端機:點擊分割按鈕或按 Ctrl + Shift + 5
  • 關閉終端機:點擊垃圾桶圖示或按 Ctrl + Shift + `

進階終端機功能:

功能說明
Shell Integration基於 OSC 633 序列,於左側邊欄/捲軸標示每個指令的成功/失敗狀態,並支援指令偵測與結束代碼追蹤
可點擊連結按住 Ctrl/Cmd 並將滑鼠停留在輸出的檔案路徑或 URL 上,點擊即可開啟編輯器或瀏覽器
指令歷史導覽Ctrl + Up / Ctrl + Down 於輸出中的先前指令間跳轉,每則指令旁會顯示可重新執行的圖示
Sticky Scroll捲動時將目前執行中或部分可見的指令固定顯示於終端機頂端,方便瀏覽長輸出;設定 "terminal.integrated.stickyScroll.enabled": true 啟用,點擊標題可跳轉至該指令位置
Terminal Chat(終端機內建 Copilot)在終端機中直接開啟行內對話尋求 Shell 指令協助,回覆提供 Run(直接執行)與 Insert(插入以便編輯)兩種動作

3.4.2 多工作區管理

開啟多個工作區:

  1. 新視窗:File > New Window 或 Ctrl + Shift + N
  2. 多資料夾工作區:File > Add Folder to Workspace
  3. 工作區檔案:儲存為 .code-workspace 檔案

工作區切換:

  • 使用 Ctrl + Tab 在不同視窗間切換
  • 使用 Ctrl + 1, 2, 3... 切換編輯器群組

3.4.3 實用終端機指令

前端開發常用指令:

# 進入前端目錄
cd frontend

# 安裝相依套件
npm install

# 啟動開發伺服器
npm run dev

# 執行測試
npm run test

# 建置專案
npm run build

# 檢查程式碼
npm run lint

後端開發常用指令:

# 進入後端目錄
cd backend

# Maven 編譯
mvn compile

# 執行應用程式
mvn spring-boot:run

# 執行測試
mvn test

# 打包專案
mvn package

# 清理專案
mvn clean

3.5 程式碼片段 (Snippets) 使用

3.5.1 使用內建程式碼片段

VS Code 提供豐富的內建程式碼片段,加速程式碼撰寫效率。

常用 JavaScript/TypeScript 片段:

// 輸入 "for" 然後按 Tab
for (let index = 0; index < array.length; index++) {
    const element = array[index];
}

// 輸入 "fof" 然後按 Tab
for (const iterator of object) {
}

// 輸入 "func" 然後按 Tab
function name(params: type) {
    
}

// 輸入 "cl" 然後按 Tab
console.log();

常用 Java 片段:

// 輸入 "main" 然後按 Tab
public static void main(String[] args) {
    
}

// 輸入 "sysout" 然後按 Tab
System.out.println();

// 輸入 "for" 然後按 Tab
for (int i = 0; i < args.length; i++) {
    
}

// 輸入 "try" 然後按 Tab
try {
    
} catch (Exception e) {
    // TODO: handle exception
}

3.5.2 自訂程式碼片段

建立全域程式碼片段:

  1. 按 Ctrl + Shift + P
  2. 輸入 Preferences: Configure User Snippets
  3. 選擇語言或建立新的全域片段檔案

Vue 3 Composition API 片段範例:

{
  "Vue 3 Composition API Component": {
    "prefix": "vue3-comp",
    "body": [
      "<template>",
      "  <div class=\"${1:component-name}\">",
      "    ${2:<!-- Component content -->}",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "import { ref, reactive, computed, onMounted } from 'vue'",
      "",
      "// Reactive data",
      "const ${3:data} = ref(${4:''})",
      "",
      "// Computed properties",
      "const ${5:computedValue} = computed(() => {",
      "  return ${6:// computation}",
      "})",
      "",
      "// Lifecycle hooks",
      "onMounted(() => {",
      "  ${7:// mounted logic}",
      "})",
      "</script>",
      "",
      "<style scoped>",
      ".${1:component-name} {",
      "  ${8:/* styles */}",
      "}",
      "</style>"
    ],
    "description": "Vue 3 Composition API component template"
  }
}

Spring Boot Controller 片段範例:

{
  "Spring Boot REST Controller": {
    "prefix": "spring-controller",
    "body": [
      "@RestController",
      "@RequestMapping(\"/api/${1:resource}\")",
      "@Validated",
      "public class ${2:Resource}Controller {",
      "",
      "    private final ${2:Resource}Service ${3:service};",
      "",
      "    public ${2:Resource}Controller(${2:Resource}Service ${3:service}) {",
      "        this.${3:service} = ${3:service};",
      "    }",
      "",
      "    @GetMapping",
      "    public ResponseEntity<List<${2:Resource}>> getAll() {",
      "        List<${2:Resource}> ${4:resources} = ${3:service}.findAll();",
      "        return ResponseEntity.ok(${4:resources});",
      "    }",
      "",
      "    @GetMapping(\"/{id}\")",
      "    public ResponseEntity<${2:Resource}> getById(@PathVariable Long id) {",
      "        ${2:Resource} ${5:resource} = ${3:service}.findById(id);",
      "        return ResponseEntity.ok(${5:resource});",
      "    }",
      "",
      "    @PostMapping",
      "    public ResponseEntity<${2:Resource}> create(@Valid @RequestBody ${2:Resource} ${5:resource}) {",
      "        ${2:Resource} created = ${3:service}.create(${5:resource});",
      "        return ResponseEntity.status(HttpStatus.CREATED).body(created);",
      "    }",
      "}"
    ],
    "description": "Spring Boot REST Controller template"
  }
}

3.5.3 專案特定程式碼片段

在專案根目錄建立 .vscode/snippets.code-snippets:

{
  "Project API Response": {
    "prefix": "api-response",
    "body": [
      "interface ${1:ResponseName} {",
      "  success: boolean;",
      "  message: string;",
      "  data?: ${2:any};",
      "  errors?: string[];",
      "  timestamp: string;",
      "}"
    ],
    "description": "Standard API response interface"
  },
  
  "Project Test Case": {
    "prefix": "test-case",
    "body": [
      "describe('${1:Test Suite}', () => {",
      "  beforeEach(() => {",
      "    ${2:// Setup}",
      "  });",
      "",
      "  it('should ${3:test description}', () => {",
      "    // Arrange",
      "    ${4:// Setup test data}",
      "",
      "    // Act",
      "    ${5:// Execute test action}",
      "",
      "    // Assert",
      "    ${6:// Verify results}",
      "  });",
      "});"
    ],
    "description": "Standard test case template"
  }
}

3.5.4 程式碼片段最佳實務

設計原則:

  1. 簡潔的前綴:使用容易記憶的簡短前綴
  2. 合理的佔位符:使用有意義的變數名稱
  3. 適當的預設值:提供常用的預設值
  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 會以灰色文字顯示建議:

操作快捷鍵
接受建議Tab
拒絕建議Esc
查看下一個建議Alt + ]
查看上一個建議Alt + [
觸發行內建議Alt + \

使用技巧:

  • 撰寫清楚的函式名稱和註解,Copilot 能產生更好的建議
  • 在 JavaDoc 或 JSDoc 中描述功能,Copilot 會根據文件產生對應實作
  • Copilot 會根據檔案上下文和已開啟的其他檔案來推斷意圖

Next Edit Suggestions(NES):

NES 是 Copilot 的進階功能,會根據你目前的編輯模式預測你接下來最可能的編輯位置和內容。當偵測到潛在的下一步編輯時,編輯器會在相關位置顯示建議,按 Tab 即可跳轉並套用。

// 啟用 NES(預設已啟用)
{
  "editor.inlineSuggest.nextEditSuggestions.enabled": true
}

提示:NES 特別適合重複性重構操作,例如統一修改變數名稱或批次新增參數,它會自動建議下一個需要修改的位置。

/**
 * 計算兩個日期之間的工作天數(排除週末)
 * @param start 開始日期
 * @param end 結束日期
 * @return 工作天數
 */
// 輸入方法簽名後,Copilot 會自動建議完整實作
public long calculateWorkingDays(LocalDate start, LocalDate end) {
    // Copilot 會在此自動建議實作內容
}

3.6.2 Copilot Chat 對話式助手

按 Ctrl + Alt + I 開啟 Chat 面板(已內建於 Copilot 擴充功能中)。目前官方以 AI features cheat sheet 作為指令與工具的權威速查表,以下為依用途分類整理的常用項目。

斜線指令(依用途分類):

分類指令功能
程式碼任務/explain、/fix、/doc、/tests、/setupTests解釋、修正、產生文件註解、產生測試、建立測試環境
對話管理/clear、/compact、/fork、/debug、/troubleshoot清空對話、壓縮上下文、分叉對話、除錯、疑難排解
專案腳手架/new、/newNotebook、/init、/startDebugging、/search建立新專案、新 Notebook、初始化 AI 設定、啟動偵錯、搜尋
規劃/plan切換至 Plan Agent,產生實作計畫(見 3.6.7)
客製化管理/agents、/hooks、/instructions、/prompts、/skills開啟對應客製化項目的管理選單
AI 輔助建立/create-prompt、/create-instruction、/create-skill、/create-agent、/create-hook依描述自動產生對應的客製化檔案
核准控制/yolo(/autoApprove)、/disableYolo(/disableAutoApprove)全域啟用/停用自動核准所有工具呼叫
動態指令/<skill-name>、/<prompt-name>執行指定的 Agent Skill 或 Prompt File

內建 @ 對話參與者(目前僅保留三種):

參與者用途
@github查詢 GitHub 倉庫、Issues、Pull Requests
@terminal詢問整合終端機、Shell 指令相關問題
@vscode詢問 VS Code 本身功能、設定、擴充功能 API

重要變更:舊版用於查詢整個專案的 @workspace 參與者已不存在於目前的內建清單中。現行 Agent 模式會透過內建工具(如 #search/codebase)自動判斷何時需要搜尋整個工作區,通常不需要手動輸入 @workspace;一般對話與提問已預設具備代理能力。

常用 # 工具/上下文參考(節選):

工具群組範例說明
#read#file:pom.xml、#selection讀取指定檔案、選取內容
#search#search/codebase、#search/usages語義搜尋整個工作區、查找符號使用位置
#edit#edit/createFile、#edit/editFiles建立、編輯檔案
#execute#execute/runInTerminal、#execute/testFailure執行終端機指令、分析失敗測試
#web#web/fetch擷取網頁內容作為上下文
#agent#agent/runSubagent呼叫子代理(Subagent)處理獨立子任務
#todos—追蹤代理任務進度清單
#githubRepo#githubRepo:owner/repo參考特定 GitHub 倉庫內容

常用鍵盤快捷鍵:

動作快捷鍵
開啟 Chat 面板Ctrl + Alt + I
開啟行內聊天Ctrl + I
新增對話工作階段Ctrl + N(於 Chat 面板內)
切換至 Agent 模式Ctrl + Shift + I
開啟快速對話 (Quick Chat)Ctrl + Shift + Alt + L
顯示模型選擇器Ctrl + Alt + .
AI 智慧重新命名F2
在目前對話中搜尋 (Find in Chat)Ctrl + F
切換上/下一則提示Ctrl + Alt + Up / Ctrl + Alt + Down

3.6.3 Inline Chat(行內聊天)

在編輯器中按 Ctrl + I 直接開啟行內聊天,無需切換到 Chat 面板即可進行程式碼修改。

使用方式:

  1. 在編輯器中按 Ctrl + I
  2. 輸入自然語言指令,例如:「加入輸入驗證」「重構為 Stream API」
  3. 檢視差異並選擇接受或拒絕

適用場景:

  • 局部程式碼重構
  • 快速修正錯誤
  • 產生程式碼片段
  • 獲取程式碼說明而不離開編輯器

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 可以在以下介面間無縫切換:

介面說明
Chat 面板VS Code 內建的互動式對話面板
Agents 視窗(原 Agent Sessions)集中管理所有進行中/已完成 Session 的專屬視窗,可透過標題列或 Chat: Open Agents Window 指令開啟
瀏覽器透過 vscode.dev/agents 於瀏覽器中檢視與操作
CLI透過命令列工具操作 Session
GitHub Copilot App透過 GitHub 行動應用程式追蹤與回覆

啟動 Agent 任務:

  1. 按 Ctrl + Alt + I 開啟 Chat 面板(預設即為 Agent 模式)
  2. 輸入高階任務描述,例如:
建立一個 Node.js 食譜分享網站,使用 Express 和 MongoDB,必須有現代化的響應式介面。
  1. Agent 會自動:建立檔案、安裝依賴、執行指令、自我修正錯誤

Agents 視窗管理功能:

  • 可同時執行多個 Session,各自專注在不同任務,並支援拖放分組整理
  • 編輯器面板可將開啟的檔案/差異與對話並列顯示,共用同一組分頁列
  • 追蹤整個對話(而非僅最後一次請求)的模型用量/額度消耗,並可個別檢視子代理的用量

Agent 執行位置:

類型說明適用場景
本地 (Local)在 VS Code 中互動式執行日常開發、即時回饋
背景 (Background)在本機背景自主執行耗時任務、自動化工作
雲端 (Cloud)透過 Pull Request 在雲端協作團隊協作、複雜變更
第三方代理主機 (Third-party Agent Host)使用 Anthropic Claude Agent、OpenAI Codex Agent 等代理主機特定模型或工作流程需求

提示:可隨時將任務從一種代理類型移交到另一種,完整的對話歷史會自動保留。此能力建立在新的代理主機 (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 面板的權限選擇器中可選擇以下核准層級:

核准層級說明
Default Approvals使用你設定的核准規則,需要核准的工具會顯示確認對話框
Assisted permissions由語言模型即時評估每個工具呼叫的風險,判定為低風險者自動核准
Bypass Approvals自動核准所有工具呼叫,不顯示確認對話框

注意:Autopilot 嚴格來說是一種「代理模式」,而非上述核准層級之一。啟用後,代理會自動核准所有工具呼叫、自動重試錯誤,並在遇到澄清性問題時自動回答,持續自主工作直到判定任務完成為止,執行於 3.6.5 節提及的 Agent Host 之上。

細部核准設定:

設定用途
chat.permissions.default新 Session 的預設核准層級
chat.tools.terminal.autoApprove終端機指令自動核准規則(可用布林值或以 / 包覆的正規表示式)
chat.tools.terminal.enableAutoApprove是否啟用終端機自動核准
chat.tools.terminal.blockDetectedFileWrites封鎖偵測到的危險檔案寫入操作
chat.tools.eligibleForAutoApproval設定永遠排除於自動核准之外的工具清單
chat.tools.global.autoApprove全域自動核准工具呼叫

⚠️ 安全提醒: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 是內建的計畫代理,可在撰寫任何程式碼之前,將任務分解為結構化的實作計畫,並遵循以下四階段流程:

階段說明
1. Discovery(探索)使用唯讀工具研究任務、分析程式碼庫
2. Alignment(校準)詢問澄清問題以釐清模糊需求
3. Design(設計)草擬結構化的實作計畫
4. Refinement(精煉)根據你的回饋反覆調整計畫內容

使用方式:

  1. 於 Chat 中輸入 /plan,或從代理選擇器切換至 Plan Agent
  2. 描述你的任務需求,Plan Agent 會依上述四階段與你互動
  3. 重要限制:在計畫經過審核並確認前,Plan Agent 不會進行任何程式碼變更
  4. 計畫確認後,透過 Handoffs(交接) 功能一鍵將計畫移交給實作代理(本地、背景或雲端),並自動保留完整上下文;也可先儲存計畫供日後使用

適用場景:

  • 大型功能開發前的規劃
  • 跨多個檔案的重構計畫
  • 技術債務清理的優先順序
  • 遷移方案的步驟設計

3.6.8 自訂指示檔 (Custom Instructions)

自訂指示檔讓 Copilot 了解你的專案慣例,確保 AI 產生的程式碼符合你的風格。VS Code 支援多種指示檔格式:

永遠啟用的指示檔(Always-on):

檔案說明
.github/copilot-instructions.md專案層級通用指示,自動套用到所有 Chat 請求
AGENTS.md多 AI 代理通用指示(根目錄或子資料夾)
CLAUDE.md相容 Claude Code 的指示檔

.github/copilot-instructions.md 範例:

# Copilot 指引
- 使用 JavaDoc 格式撰寫所有公開方法的註解
- 測試框架使用 JUnit 5
- 日誌使用 Log4j2
- 變數和方法名稱使用 camelCase
- 回應使用繁體中文
- API 使用 RESTful 設計風格
- 錯誤處理使用自訂例外類別

檔案型指示檔(File-based)— .instructions.md:

根據檔案類型或路徑動態套用不同的指示:

---
name: 'Python Standards'
description: 'Python 檔案的編碼慣例'
applyTo: '**/*.py'
---
# Python 編碼標準
- 遵循 PEP 8 風格指南
- 所有函式簽名使用 type hints
- 公開函式必須撰寫 docstring
- 使用 4 個空格縮排

四種指示檔機制彙整(會同時合併套用,非互斥):

檔案類型位置適用範圍啟用設定
.github/copilot-instructions.md倉庫根目錄 / .github/永遠套用、整個工作區預設開啟
AGENTS.md工作區根目錄(可含子資料夾)永遠套用;跨工具通用標準,多種 AI 代理皆可辨識chat.useAgentsMdFile;巢狀支援(實驗性)chat.useNestedAgentsMdFiles
*.instructions.md.github/instructions/(工作區)或 ~/.copilot/instructions(使用者)依 applyTo glob 條件動態套用,例如 **/*.ts,**/*.tsxchat.includeApplyingInstructions;自訂位置 chat.instructionsFilesLocations
CLAUDE.md工作區根目錄、.claude/,或 ~/.claude/CLAUDE.md永遠套用,與 Claude Code 相容chat.useClaudeMdFile;注意此格式使用 paths 屬性而非 applyTo,遵循 Claude 的規則格式

指示套用優先順序:當指示內容互相衝突時,優先順序為「個人(使用者層級)」> 「倉庫層級(.github/copilot-instructions.md / AGENTS.md)」> 「組織層級」。但官方文件強調:所有類型的指示都會一併提供給 AI,優先順序僅在發生直接衝突時才生效,其餘情況為疊加套用。

快速產生指示檔:

  • 在 Chat 中輸入 /init — 分析專案並產生 copilot-instructions.md
  • 在 Chat 中輸入 /create-instruction — 根據描述產生特定指示檔

組織層級指示: 可在 GitHub 組織層級定義共用指示,跨多個工作區和倉庫自動套用,並顯示在 Chat 的 Instructions 選單中:

{
  "github.copilot.chat.organizationInstructions.enabled": true
}

撰寫建議:指示內容應簡短且自成一體,說明「為什麼」而非只說「是什麼」,提供具體程式碼範例,並依主題拆分為多個 .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 呼叫、瀏覽器操作等工具。

快速開始(多種安裝方式):

  1. 開啟擴充功能面板 (Ctrl + Shift + X),搜尋 @mcp,從 MCP 伺服器圖庫中安裝
  2. 或執行 Ctrl + Shift + P → MCP: Add Server(精靈式引導設定)
  3. 或直接編輯 mcp.json
  4. 或透過命令列 code --add-mcp 快速加入
  5. 確認信任後,VS Code 會自動發現伺服器的工具

設定範圍:

範圍位置適用情境
工作區.vscode/mcp.json可提交至版本控制,供團隊共用
使用者層級Ctrl + Shift + P → MCP: Open User Configuration存放個人 API 金鑰等私密設定,可隨 Settings Sync 的 MCP Servers 選項同步

手動設定 MCP 伺服器(.vscode/mcp.json):

注意:頂層鍵名固定為 servers(而非部分其他 MCP 用戶端慣用的 mcpServers),這是 VS Code 有意為之的差異,設定時請特別留意。

{
  "servers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp"
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@microsoft/mcp-server-playwright"]
    }
  }
}

工具數量上限:Copilot 目前對單一 Session 最多支援 128 個工具,啟用 MCP 伺服器時應謹慎挑選,避免超出上限或稀釋 Agent 的工具選擇準確度。

MCP 伺服器提供的能力:

能力說明使用方式
ToolsAgent 可呼叫的外部工具Agent 自動選擇適合的工具
Resources唯讀資料上下文(檔案、資料表等)Chat 中選擇 Add Context > MCP Resources
Prompts預設的提示範本在 Chat 中輸入 /<MCP伺服器>.<提示名>
MCP Apps互動式 UI 元件(表單、視覺化等)支援的 MCP 伺服器會自動渲染

安全性(macOS/Linux):

{
  "servers": {
    "myServer": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@example/mcp-server"],
      "sandboxEnabled": true,
      "sandbox": {
        "filesystem": {
          "allowWrite": ["${workspaceFolder}"]
        },
        "network": {
          "allowedDomains": ["api.example.com"]
        }
      }
    }
  }
}

管理 MCP 伺服器:

  • 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/)資料夾中建立:

---
name: 'Security Reviewer'
description: '專門進行程式碼安全性審查的代理'
tools:
  - run_in_terminal
  - read_file
  - grep_search
model: ['Claude Opus 4.5', 'GPT-5.2']
agents: []
user-invocable: true
disable-model-invocation: false
---
# 安全審查代理

你是一位資深的安全工程師。審查程式碼時請:
- 檢查 OWASP Top 10 漏洞
- 檢查敏感資訊洩漏
- 驗證輸入驗證與輸出編碼
- 檢查認證和授權機制
- 產生安全審查報告

Frontmatter 欄位說明:

欄位說明
name / description代理名稱與用途描述
tools此代理可使用的工具清單
model偏好的語言模型,可為單一字串或依優先順序排列的陣列
agents此代理可呼叫的子代理(Subagent);* 代表全部允許、[] 代表不允許呼叫任何子代理
handoffs定義可交接(Handoff)的目標代理,提供導引式的任務轉移
user-invocable是否可由使用者手動選取此代理(預設 true)
disable-model-invocation是否禁止其他代理透過 runSubagent 自動呼叫此代理(預設 false)

子代理 (Subagent) 執行模式:

  • 在獨立的上下文視窗中執行,不繼承主對話的完整歷史,有助於保持主對話上下文精簡
  • 以同步方式執行:主代理會等待子代理完成後才繼續
  • 多個獨立分析任務可平行呼叫子代理
  • 僅將最終結果回傳給呼叫端;透過 #agent/runSubagent 工具觸發
  • 若需允許子代理再呼叫其他子代理(遞迴呼叫),需設定 chat.subagents.allowInvocationsFromSubagents

使用方式:

  • 在 Chat 中輸入 /create-agent 使用 AI 輔助建立
  • 或使用指令 Chat: New Custom Agent
  • 或透過 Agent Customizations 編輯器(齒輪圖示 → Configure Chat → Agents 分頁)集中管理,該編輯器同時可管理 Skills、Instructions、Prompts 與 Hooks,並顯示各項目的來源(內建/使用者/工作區/組織/擴充功能)

組織與跨倉庫共用:

{
  "github.copilot.chat.organizationCustomAgents.enabled": true,
  "chat.useCustomizationsInParentRepositories": true
}

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 資料夾結構:

.github/skills/
├── deploy/
│   ├── SKILL.md        # 技能描述與指示(frontmatter: name、description、argument-hint 等)
│   ├── scripts/        # 自動化腳本
│   └── templates/      # 範本檔案
└── testing/
    ├── SKILL.md
    └── scripts/

命名限制:資料夾名稱須與 SKILL.md 中的 name 欄位一致,僅限小寫字母、數字與連字號,長度上限 64 字元;description 上限 1024 字元。

三層漸進式載入機制(確保上下文使用效率):

  1. 探索層:Agent 僅讀取 name 與 description 兩個 metadata 欄位,判斷此 Skill 是否與當前任務相關
  2. 指示層:判定相關或使用者明確呼叫時,才載入 SKILL.md 完整內容
  3. 資源層:僅在指示內容明確參照時,才載入 scripts/、templates/ 等附屬檔案

個人層級位置:~/.copilot/skills/、~/.claude/skills/、~/.agents/skills/(或透過 chat.agentSkillsLocations 自訂)。

context: fork(實驗性):在 frontmatter 中設定後,此 Skill 會於獨立的子代理上下文中執行,僅將最終結果回傳主對話,適合會產生大量中間輸出的技能。

建立 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/ 資料夾中建立:

---
name: 'scaffold-component'
description: '建立 Vue 3 元件的完整腳手架'
agent: 'agent'
tools: ['edit/createFile']
---
請依照以下結構建立一個新的 Vue 3 Composition API 元件:
1. 建立 `src/components/${input:componentName}.vue`
2. 包含 TypeScript 支援和 scoped CSS
3. 新增對應的單元測試檔案
4. 更新相關的 index.ts 匯出

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(預覽)狀態,設定格式與行為可能於未來版本調整。

八個生命週期事件:

事件觸發時機
SessionStartSession 開始時
UserPromptSubmit使用者送出提示時
PreToolUse工具呼叫執行前(可用於阻擋該次呼叫)
PostToolUse工具呼叫執行後
PreCompact對話上下文壓縮前
SubagentStart子代理啟動時
SubagentStop子代理結束時
StopSession 結束時

運作機制:每個事件觸發時,會以 JSON 格式將資料透過 stdin 傳給指定的 shell 指令;該指令可將 JSON 寫入 stdout 以影響後續行為,包含直接阻擋某次工具呼叫。Hooks 為確定性 (deterministic) 執行——只要事件發生就必定執行,不同於由模型自行判斷的行為。

設定 Hooks(工作區 .github/hooks/*.json,或相容 Claude 格式的 .claude/settings.json):

{
  "hooks": {
    "PostToolUse": [
      {
        "type": "command",
        "command": "ruff format ${file}",
        "timeout": 30
      }
    ]
  }
}

常見 Hook 使用場景:

  • 封鎖危險操作(如 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 模型,選擇最適合當前需求的模型:

切換模型:

  1. 在 Chat 面板的模型選擇器中選擇(快捷鍵 Ctrl + Alt + .)
  2. 快速任務使用較快的模型,複雜架構決策使用更強大的模型
  3. 選擇 Auto(自動選模,已為正式版):系統會依任務複雜度與模型即時可用性,自動路由至合適的模型;將滑鼠停留在回覆上可查看實際生成的模型
  4. 於語言模型編輯器(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 方案與額度(摘要,以官方頁面為準):

方案費用重點
Copilot Free免費每月 2,000 次補全;僅提供 Auto 自動選模
Copilot ProUS$10/月可手動選擇模型;每月約 1,500 點 AI 額度
Copilot Pro+US$39/月進階模型存取;每月約 7,000 點額度
Copilot MaxUS$100/月個人方案最高階,優先存取高階模型;每月約 20,000 點額度
Copilot BusinessUS$19/使用者/月組織集中管理;每人每月約 1,900 點額度
Copilot EnterpriseUS$39/使用者/月僅限 GitHub Enterprise Cloud,含企業級管理能力

參考資源: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 使用,且不綁定特定廠商。

外掛結構:

my-plugin/
├── plugin.json          # 元資料,含 $schema 指向 agent-plugins.org 1.0 規格
├── skills/               # 內含的 Agent Skills
├── mcp.json              # 內含的 MCP 伺服器設定
└── com.github.copilot/   # VS Code / Copilot 專屬命名空間
    ├── agents/
    ├── hooks/
    └── commands/

安裝方式:

  • 擴充功能面板篩選 @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 實務案例與注意事項

⚠️ 開發注意事項

  1. 版本控制:經常提交變更,避免遺失程式碼
  2. 分支管理:使用功能分支進行開發,避免直接在主分支修改
  3. 程式碼格式化:設定自動格式化,保持程式碼風格一致

💡 開發最佳實務

  • 使用 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 專案啟動與設定

初始化專案環境:

  1. 開啟專案

    cd d:\your-project\frontend
    code .
  2. 安裝相依套件

    npm install
    # 或使用 yarn
    yarn install
  3. 檢查 Node.js 版本

    node --version  # 建議使用 Node.js 20+ (LTS)
    npm --version   # 建議使用 npm 10+

4.1.2 開發伺服器啟動

方式一:透過 VS Code 任務

  1. 按 Ctrl + Shift + P
  2. 輸入 Tasks: Run Task
  3. 選擇 Frontend: Dev Server

方式二:透過終端機

cd frontend
npm run dev
# 或
yarn dev

開發伺服器資訊:

  • 預設連接埠:http://localhost:3000
  • 自動重新載入:檔案異動時自動更新
  • 開發工具:Vue DevTools 整合

4.1.3 前端偵錯設定

配置 launch.json:

{
  "name": "Debug Vue App",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/frontend/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

偵錯步驟:

  1. 啟動開發伺服器
  2. 在 .vue 或 .ts 檔案中設定斷點
  3. 按 F5 啟動偵錯
  4. 在瀏覽器中操作觸發斷點

4.1.4 前端測試執行

單元測試 (Vitest):

# 執行所有測試
npm run test

# 監視模式執行測試
npm run test:watch

# 產生測試覆蓋率報告
npm run test:coverage

E2E 測試 (Cypress):

# 開啟 Cypress 測試介面
npm run test:e2e

# 無介面執行 E2E 測試
npm run test:e2e:headless

4.1.5 前端建置流程

開發建置:

npm run build:dev

生產建置:

npm run build

預覽建置結果:

npm run preview

4.2 後端開發流程 (Spring Boot)

4.2.1 Java 環境設定

檢查 Java 環境:

java -version     # 建議使用 Java 17+
mvn -version      # 檢查 Maven 版本

VS Code Java 設定: 確保已安裝以下擴充功能:

  • Extension Pack for Java
  • Spring Boot Extension Pack
  • Maven for Java

4.2.2 Spring Boot 應用程式啟動

方式一:透過 VS Code 偵錯

  1. 開啟主要應用程式類別(通常是 Application.java)
  2. 點擊類別上方的 “Run” 或 “Debug” 連結
  3. 或按 F5 啟動偵錯模式

方式二:透過 Maven 任務

cd backend
mvn spring-boot:run

方式三:透過 VS Code 任務

  1. 按 Ctrl + Shift + P
  2. 選擇 Tasks: Run Task
  3. 選擇 Backend: Maven Spring Boot Run

4.2.3 後端偵錯設定

偵錯配置範例:

{
  "name": "Debug Spring Boot",
  "type": "java",
  "request": "launch",
  "mainClass": "com.yourcompany.YourApplication",
  "projectName": "your-backend-project",
  "args": "--spring.profiles.active=dev",
  "vmArgs": [
    "-Dspring.profiles.active=dev",
    "-Dserver.port=8080"
  ],
  "console": "internalConsole",
  "stopOnEntry": false
}

設定斷點與偵錯:

  1. 在 Java 程式碼中點擊行號左側設定斷點
  2. 啟動偵錯模式
  3. 使用 Postman 或前端應用程式觸發 API
  4. 程式會在斷點處暫停

4.2.4 API 測試

使用 REST Client 擴充功能:

建立 api-test.http 檔案:

### 測試用戶登入
POST http://localhost:8080/api/auth/login
Content-Type: application/json

{
  "username": "admin",
  "password": "password123"
}

### 取得用戶清單
GET http://localhost:8080/api/users
Authorization: Bearer {{token}}

### 建立新用戶
POST http://localhost:8080/api/users
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "username": "newuser",
  "email": "newuser@example.com",
  "role": "USER"
}

4.2.5 後端測試執行

單元測試:

# 執行所有單元測試
mvn test

# 執行特定測試類別
mvn test -Dtest=UserServiceTest

# 執行特定測試方法
mvn test -Dtest=UserServiceTest#testCreateUser

整合測試:

# 執行整合測試
mvn verify

# 包含測試覆蓋率報告
mvn clean verify jacoco:report

4.3 全端開發工作流程

4.3.1 同時啟動前後端

使用 VS Code 複合任務:

在 tasks.json 中新增:

{
  "label": "Start Full Stack",
  "dependsOn": [
    "Backend: Maven Spring Boot Run",
    "Frontend: Dev Server"
  ],
  "dependsOrder": "parallel"
}

手動啟動步驟:

  1. 開啟兩個終端機視窗
  2. 終端機 1:
    cd backend
    mvn spring-boot:run
  3. 終端機 2:
    cd frontend
    npm run dev

4.3.2 API 介接開發

前端 API 設定:

在 frontend/src/config/api.ts 中:

const API_BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://api.yourcompany.com' 
  : 'http://localhost:8080';

export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

CORS 設定 (後端):

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

4.3.3 資料庫開發

H2 資料庫 (開發環境):

# application-dev.yml
spring:
  datasource:
    url: jdbc:h2:mem:testdb
    driver-class-name: org.h2.Driver
    username: sa
    password: 
  h2:
    console:
      enabled: true
      path: /h2-console

MySQL 資料庫 (生產環境):

# application-prod.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/yourdb
    username: ${DB_USERNAME}
    password: ${DB_PASSWORD}
    driver-class-name: com.mysql.cj.jdbc.Driver

4.4 程式碼品質檢查

4.4.1 前端程式碼檢查

ESLint 執行:

# 檢查所有檔案
npm run lint

# 自動修正可修正的問題
npm run lint:fix

# 檢查特定檔案
npx eslint src/components/UserForm.vue

Prettier 格式化:

# 格式化所有檔案
npm run format

# 檢查格式化狀態
npm run format:check

4.4.2 後端程式碼檢查

Checkstyle 檢查:

# 執行 Checkstyle 檢查
mvn checkstyle:check

# 產生 Checkstyle 報告
mvn checkstyle:checkstyle

SpotBugs 靜態分析:

# 執行 SpotBugs 分析
mvn spotbugs:check

# 產生 SpotBugs 報告
mvn spotbugs:spotbugs

4.5 效能監控與分析

4.5.1 前端效能監控

使用 Lighthouse 擴充功能:

  1. 安裝 “Lighthouse” 擴充功能
  2. 在開發者工具中執行 Lighthouse 分析
  3. 檢視效能報告和建議

Vue DevTools 效能分析:

// 在 main.ts 中啟用效能追蹤
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 開發環境啟用效能追蹤
if (process.env.NODE_ENV === 'development') {
  app.config.performance = true
}

app.mount('#app')

前端效能檢查清單:

  • Bundle 大小分析:npm run build -- --report
  • Core Web Vitals 監控
  • 記憶體使用量檢查
  • 網路請求最佳化

4.5.2 後端效能監控

Spring Boot Actuator 設定:

# application.yml
management:
  endpoints:
    web:
      exposure:
        include: health,info,metrics,prometheus
  endpoint:
    health:
      show-details: always
    metrics:
      enabled: true

效能指標監控:

@RestController
public class MetricsController {
    
    @Autowired
    private MeterRegistry meterRegistry;
    
    @GetMapping("/api/metrics/custom")
    public Map<String, Double> getCustomMetrics() {
        Map<String, Double> metrics = new HashMap<>();
        
        // JVM 記憶體使用量
        metrics.put("jvm.memory.used", 
            meterRegistry.get("jvm.memory.used").gauge().value());
        
        // HTTP 請求計數
        metrics.put("http.requests.total", 
            meterRegistry.get("http.server.requests").counter().count());
        
        return metrics;
    }
}

後端效能檢查清單:

  • 資料庫查詢最佳化
  • API 回應時間監控
  • JVM 記憶體使用分析
  • 執行緒池狀態檢查

4.5.3 VS Code 效能診斷

啟用效能監控:

  1. 按 Ctrl + Shift + P
  2. 輸入 Developer: Startup Performance
  3. 檢視啟動效能報告

常用效能診斷指令:

Ctrl + Shift + P:
- Developer: Show Running Extensions
- Developer: Restart Extension Host
- Developer: Toggle Developer Tools
- Performance: Startup Performance

擴充功能效能分析:

// 在 VS Code 開發者工具 Console 中執行
// 查看擴充功能啟動時間
console.table(
  vscode.extensions.all
    .filter(ext => ext.isActive)
    .map(ext => ({
      id: ext.id,
      activationTime: ext.activationTime || 'Unknown'
    }))
    .sort((a, b) => (b.activationTime || 0) - (a.activationTime || 0))
)

4.6 實務案例與注意事項

⚠️ 開發流程注意事項

  1. 連接埠衝突:確保前後端使用不同連接埠
  2. 環境變數:正確設定開發和生產環境變數
  3. API 版本控制:使用 API 版本控制避免相容性問題
  4. 錯誤處理:前後端都要有適當的錯誤處理機制

💡 開發最佳實務

  • 使用功能分支進行開發,避免直接在主分支修改
  • 定期執行測試,確保程式碼品質
  • 使用 API 文件工具(如 Swagger)記錄 API 規格
  • 實施 Code Review 流程,提升程式碼品質

4.7 Python 開發環境設定

4.7.1 Python 專案結構

標準 Python 專案結構:

my-python-project/
├── .vscode/                 # VS Code 設定檔
│   ├── settings.json
│   ├── launch.json
│   └── tasks.json
├── src/                     # 原始碼目錄
│   ├── __init__.py
│   └── main.py
├── tests/                   # 測試目錄
│   ├── __init__.py
│   └── test_main.py
├── docs/                    # 文件目錄
├── requirements.txt         # 套件依賴
├── setup.py                # 安裝設定
├── README.md               # 專案說明
├── .gitignore              # Git 忽略檔案
├── pyproject.toml          # Ruff / 專案設定
└── pyproject.toml          # 專案設定(Python 3.6+)

4.7.2 Python 環境設定

虛擬環境設定

建立虛擬環境:

# 使用 venv(Python 3.3+)
python -m venv venv

# 啟動虛擬環境(Windows)
.\venv\Scripts\Activate.ps1

# 啟動虛擬環境(Linux/macOS)
source venv/bin/activate

# 安裝套件
pip install -r requirements.txt

# 凍結當前套件版本
pip freeze > requirements.txt

使用 conda:

# 建立新環境
conda create -n myproject python=3.11

# 啟動環境
conda activate myproject

# 安裝套件
conda install pandas numpy matplotlib

# 匯出環境
conda env export > environment.yml

VS Code Python 解譯器設定

設定 Python 解譯器:

  1. 按 Ctrl + Shift + P
  2. 輸入 “Python: Select Interpreter”
  3. 選擇虛擬環境中的 Python

.vscode/settings.json Python 設定:

{
  "python.defaultInterpreterPath": "./venv/Scripts/python.exe",
  "python.analysis.autoImportCompletions": true,
  "python.analysis.typeCheckingMode": "basic",
  "python.testing.pytestEnabled": true,
  "python.testing.pytestArgs": [
    "tests",
    "--verbose"
  ],
  "python.testing.unittestEnabled": false,
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.fixAll": "explicit"
    }
  }
}

4.7.3 Python 開發工具設定

Linting 和格式化

Ruff 設定(pyproject.toml):

[tool.ruff]
line-length = 88
target-version = "py311"

[tool.ruff.lint]
select = ["E", "F", "W", "I", "N", "UP", "B", "A", "C4", "SIM"]
ignore = ["E501"]

[tool.ruff.format]
quote-style = "double"
indent-style = "space"

說明:Ruff 整合了 Pylint、Flake8、Black、isort 等多種工具的功能於單一工具中,效能更快且設定更簡潔。

測試設定

pytest 設定(pytest.ini):

[tool:pytest]
testpaths = tests
python_files = test_*.py
python_classes = Test*
python_functions = test_*
addopts = 
    --verbose
    --tb=short
    --strict-markers
    --disable-warnings
    --cov=src
    --cov-report=html
    --cov-report=term-missing

單元測試範例:

# tests/test_main.py
import unittest
from src.main import Calculator

class TestCalculator(unittest.TestCase):
    def setUp(self):
        self.calc = Calculator()
    
    def test_add(self):
        """測試加法功能"""
        result = self.calc.add(2, 3)
        self.assertEqual(result, 5)
    
    def test_divide_by_zero(self):
        """測試除零例外"""
        with self.assertRaises(ValueError):
            self.calc.divide(5, 0)

if __name__ == '__main__':
    unittest.main()

4.7.4 Python 偵錯設定

.vscode/launch.json Python 設定:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    },
    {
      "name": "Python: FastAPI",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/src/main.py",
      "console": "integratedTerminal",
      "args": ["--reload"],
      "env": {
        "PYTHONPATH": "${workspaceFolder}"
      }
    },
    {
      "name": "Python: Flask",
      "type": "python",
      "request": "launch",
      "module": "flask",
      "env": {
        "FLASK_APP": "src/app.py",
        "FLASK_ENV": "development",
        "PYTHONPATH": "${workspaceFolder}"
      },
      "args": ["run", "--host=0.0.0.0", "--port=5000"],
      "jinja": true
    },
    {
      "name": "Python: Django",
      "type": "python",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    },
    {
      "name": "Python: Pytest",
      "type": "python",
      "request": "launch",
      "module": "pytest",
      "args": ["tests", "-v"],
      "console": "integratedTerminal",
      "justMyCode": false
    }
  ]
}

4.7.5 Python 任務設定

.vscode/tasks.json Python 任務:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Python: Install Dependencies",
      "type": "shell",
      "command": "pip",
      "args": ["install", "-r", "requirements.txt"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Run Tests",
      "type": "shell",
      "command": "python",
      "args": ["-m", "pytest", "tests", "-v"],
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Format Code",
      "type": "shell",
      "command": "ruff",
      "args": ["format", "src", "tests"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Lint Code",
      "type": "shell",
      "command": "ruff",
      "args": ["check", "src", "--fix"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    },
    {
      "label": "Python: Generate Documentation",
      "type": "shell",
      "command": "sphinx-build",
      "args": ["-b", "html", "docs", "docs/_build/html"],
      "group": "build"
    }
  ]
}

4.7.6 Python 專案範例

FastAPI 專案範例

主應用程式(src/main.py):

"""
FastAPI 應用程式主檔案
提供 RESTful API 服務
"""

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import List, Optional
import uvicorn

app = FastAPI(
    title="Python Tutorial API",
    description="Python 開發教學 API",
    version="1.0.0"
)

class Item(BaseModel):
    """項目模型"""
    id: Optional[int] = None
    name: str
    description: Optional[str] = None
    price: float

# 模擬資料庫
items_db: List[Item] = []

@app.get("/")
async def root():
    """根路徑"""
    return {"message": "Hello Python World!"}

@app.get("/items/", response_model=List[Item])
async def get_items():
    """取得所有項目"""
    return items_db

@app.post("/items/", response_model=Item)
async def create_item(item: Item):
    """建立新項目"""
    item.id = len(items_db) + 1
    items_db.append(item)
    return item

@app.get("/items/{item_id}", response_model=Item)
async def get_item(item_id: int):
    """取得特定項目"""
    for item in items_db:
        if item.id == item_id:
            return item
    raise HTTPException(status_code=404, detail="Item not found")

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

需求檔案(requirements.txt):

fastapi==0.115.0
uvicorn[standard]==0.32.0
pydantic==2.9.0
pytest==8.3.0
pytest-cov==5.0.0
ruff==0.7.0
mypy==1.12.0

4.7.7 Python 開發最佳實務

程式碼品質檢查

自動化品質檢查流程:

# 格式化程式碼(使用 Ruff,可取代 Black + isort)
ruff format src tests

# 靜態分析(使用 Ruff,可取代 Pylint + Flake8)
ruff check src tests --fix

# 型別檢查
mypy src

# 執行測試
pytest tests --cov=src --cov-report=html

# 安全性檢查
bandit -r src

依賴管理

使用 pip-tools 管理依賴:

# 安裝 pip-tools
pip install pip-tools

# 編譯需求檔案
pip-compile requirements.in

# 同步環境
pip-sync requirements.txt

requirements.in 範例:

# Web 框架
fastapi
uvicorn[standard]

# 資料處理
pandas
numpy

# 開發工具
pytest
ruff
mypy

5. 協作開發功能

5.1 Live Share 即時協作

5.1.1 Live Share 設定

Live Share 讓團隊成員可以即時協作編輯程式碼,無需複雜的環境設定。

安裝 Live Share:

code --install-extension ms-vsliveshare.vsliveshare

啟動協作工作階段:

  1. 按 Ctrl + Shift + P
  2. 輸入 Live Share: Start Collaboration Session
  3. 選擇分享範圍(唯讀或可編輯)
  4. 複製並分享邀請連結

5.1.2 Live Share 功能

主要功能:

  • 即時程式碼編輯:多人同時編輯同一檔案
  • 共享終端機:分享終端機操作權限
  • 共享伺服器:自動轉發本地伺服器連接埠
  • 語音通話:整合語音溝通功能
  • 追蹤游標:查看其他參與者的游標位置

協作工作流程:

  1. 主持人:啟動 Live Share 工作階段
  2. 參與者:點擊邀請連結加入
  3. 協作編輯:即時查看和編輯程式碼
  4. 除錯協作:共享除錯工作階段
  5. 結束工作階段:主持人結束協作

5.1.3 Live Share 最佳實務

權限管理:

// .vscode/settings.json
{
  "liveshare.guestApprovalRequired": true,
  "liveshare.shareExternalFiles": false,
  "liveshare.shareTerminal": false
}

安全考量:

  • 謹慎分享敏感程式碼
  • 使用唯讀模式進行程式碼展示
  • 定期檢視參與者清單

5.2 多人開發設定

5.2.1 團隊設定標準化

建立團隊設定檔案:

// .vscode/settings.json (專案層級)
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  
  // 統一擴充功能設定
  "eslint.workingDirectories": ["frontend"],
  "prettier.configPath": "frontend/.prettierrc",
  
  // Git 設定
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true
}

強制擴充功能:

// .vscode/extensions.json
{
  "recommendations": [
    "ms-ceintl.vscode-language-pack-zh-hant",
    "eamodio.gitlens",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ],
  "unwantedRecommendations": [
    "ms-vscode.vscode-typescript"
  ]
}

5.2.2 工作流程標準化

Git 工作流程設定:

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Git: Sync with Main",
      "type": "shell",
      "command": "git",
      "args": ["pull", "origin", "main"],
      "group": "build"
    },
    {
      "label": "Git: Create Feature Branch",
      "type": "shell",
      "command": "git",
      "args": ["checkout", "-b", "feature/${input:featureName}"],
      "group": "build"
    }
  ],
  "inputs": [
    {
      "id": "featureName",
      "description": "Feature branch name",
      "default": "new-feature",
      "type": "promptString"
    }
  ]
}

5.3 程式碼審查工具

5.3.1 GitHub Pull Request 整合

設定 GitHub PR 擴充功能:

code --install-extension github.vscode-pull-request-github

PR 審查工作流程:

  1. 建立 PR:Ctrl + Shift + P → GitHub: Create Pull Request
  2. 查看變更:在 GitHub Pull Requests 面板檢視差異
  3. 新增評論:直接在程式碼行上新增審查評論
  4. 回應評論:在 VS Code 中直接回覆討論
  5. 核准合併:完成審查後核准 PR

5.3.2 GitLab Merge Request 整合

設定 GitLab MR 擴充功能:

code --install-extension gitlab.gitlab-workflow

MR 審查工作流程:

  1. 建立 MR:Ctrl + Shift + P → GitLab: Create Merge Request
  2. 查看管道狀態:在狀態列查看 CI/CD 管道執行狀態
  3. 審查變更:在 GitLab 面板檢視檔案差異
  4. 新增評論:在程式碼行上新增審查建議
  5. 追蹤問題:整合 GitLab Issues 進行追蹤
  6. 合併請求:審查完成後執行合併

GitLab 與 GitHub 比較:

功能GitHubGitLab
程式碼審查Pull RequestMerge Request
CI/CD 整合GitHub ActionsGitLab CI/CD
問題追蹤GitHub IssuesGitLab Issues
專案管理GitHub ProjectsGitLab Boards
安全性掃描GitHub SecurityGitLab Security

5.3.3 程式碼審查檢查清單

前端程式碼審查要點:

  • 元件結構是否合理
  • TypeScript 類型定義是否完整
  • 是否遵循 Vue 3 最佳實務
  • CSS 樣式是否符合 Tailwind 規範
  • 是否有適當的錯誤處理
  • 效能是否最佳化

後端程式碼審查要點:

  • API 設計是否 RESTful
  • 例外處理是否完整
  • 資料庫操作是否最佳化
  • 安全性考量是否足夠
  • 測試覆蓋率是否充足
  • 文件是否完整

5.4 團隊協作最佳實務

5.4.1 溝通協調

每日站會檢查:

  • 昨天完成的工作
  • 今天計劃的工作
  • 遇到的阻礙或問題
  • 需要其他人協助的事項

程式碼評論準則:

  • 建設性的意見回饋
  • 明確的改善建議
  • 尊重團隊成員
  • 關注程式碼品質而非個人

5.4.2 知識分享

團隊學習機制:

  • 定期技術分享會
  • 程式碼最佳實務分享
  • 新技術評估與討論
  • 問題解決經驗分享

文件協作:

  • 使用 Markdown 撰寫文件
  • 版本控制文件變更
  • 定期更新開發指南
  • 建立 FAQ 知識庫

6. 進階功能與擴充

6.1 自訂程式碼片段

6.1.1 進階程式碼片段語法

變數替換:

{
  "Current Date": {
    "prefix": "date",
    "body": [
      "// Created on: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      "// Author: $1",
      "$0"
    ],
    "description": "Insert current date and author"
  }
}

條件邏輯:

{
  "React Component": {
    "prefix": "rfc",
    "body": [
      "import React${1:, { useState \\}} from 'react';",
      "",
      "interface ${2:ComponentName}Props {",
      "  ${3:// props}",
      "}",
      "",
      "const ${2:ComponentName}: React.FC<${2:ComponentName}Props> = (${4:props}) => {",
      "  ${5:const [state, setState] = useState();}",
      "",
      "  return (",
      "    <div>",
      "      ${0:// Component content}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${2:ComponentName};"
    ],
    "description": "React functional component with TypeScript"
  }
}

6.2 擴充功能開發入門

文件位置提醒:擴充功能開發(Extension API)的官方文件入口為 code.visualstudio.com/api;docs/extension-docs/overview 頁面實際上是「Container Tools」「Data Science」「Azure 工具」等特定工作流程擴充功能的導覽頁,並非 API 文件本身,若尋找 API/腳手架文件請直接以 /api 為準。

6.2.1 建立基本擴充功能

初始化擴充功能專案(免安裝方式):

npx --package yo --package generator-code -- yo code

或全域安裝後使用:

npm install -g yo generator-code
yo code

選擇擴充功能類型:

  • New Extension (TypeScript)
  • New Color Theme
  • New Language Support
  • New Code Snippets
  • New Keymap

腳手架流程中還會詢問:擴充功能名稱/識別碼/描述、是否初始化 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 對代理式擴展能力的持續投入。

6.2.2 發佈擴充功能

使用官方 CLI 工具 vsce:

npm install -g @vscode/vsce
vsce login <publisher-id>
vsce package
vsce publish

⚠️ 重要期限提醒:Azure DevOps 將於 2026 年 12 月 1 日停用全域個人存取權杖 (PAT)。目前以 PAT(Marketplace > Manage 權限範圍)發佈擴充功能仍可運作,但屬於即將淘汰的舊方法。官方建議改用基於 Microsoft Entra ID 的發佈方式(workload identity federation/受控識別,例如 vsce publish --azure-credential),及早規劃遷移可避免期限逼近時的發佈中斷風險。

6.3 工作流程自動化

6.3.1 Task 自動化

VS Code 任務系統概述:

VS Code 任務系統讓您可以自動化常見的開發工作流程,如建置、測試、部署等。

基本任務配置:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build Project",
      "type": "shell",
      "command": "mvn",
      "args": ["clean", "compile"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": ["$maven-compiler-java"]
    }
  ]
}

複合任務範例:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend: Install Dependencies",
      "type": "shell",
      "command": "npm",
      "args": ["install"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build"
    },
    {
      "label": "Frontend: Build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "group": "build",
      "dependsOn": "Frontend: Install Dependencies"
    },
    {
      "label": "Backend: Test",
      "type": "shell",
      "command": "mvn",
      "args": ["test"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      },
      "group": "test"
    },
    {
      "label": "Full Build Pipeline",
      "dependsOrder": "sequence",
      "dependsOn": [
        "Frontend: Build",
        "Backend: Test"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

任務變數使用:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Deploy to Environment",
      "type": "shell",
      "command": "deploy",
      "args": ["--env", "${input:environment}"],
      "group": "build"
    }
  ],
  "inputs": [
    {
      "id": "environment",
      "description": "Select deployment environment",
      "type": "pickString",
      "options": [
        "development",
        "staging", 
        "production"
      ],
      "default": "development"
    }
  ]
}

背景任務設定:

{
  "label": "Watch Mode",
  "type": "shell",
  "command": "npm",
  "args": ["run", "watch"],
  "isBackground": true,
  "group": "build",
  "presentation": {
    "echo": true,
    "reveal": "always",
    "focus": false,
    "panel": "new"
  },
  "problemMatcher": {
    "pattern": [
      {
        "regexp": "\\b\\B",
        "file": 1,
        "location": 2,
        "message": 3
      }
    ],
    "background": {
      "activeOnStart": true,
      "beginsPattern": "^.*webpack.*",
      "endsPattern": "^.*compiled.*"
    }
  }
}

任務執行快捷鍵:

// keybindings.json
[
  {
    "key": "ctrl+shift+b",
    "command": "workbench.action.tasks.build"
  },
  {
    "key": "ctrl+shift+t", 
    "command": "workbench.action.tasks.test"
  },
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "Full Build Pipeline"
  }
]

常用任務指令:

  • 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:

# .github/workflows/ci.yml
name: CI/CD Pipeline
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Setup Java
      uses: actions/setup-java@v4
      with:
        java-version: '17'
        distribution: 'temurin'
    - name: Build with Maven
      run: mvn clean compile test

6.3.3 GitLab CI/CD 整合

設定 GitLab CI/CD:

# .gitlab-ci.yml
stages:
  - build
  - test
  - deploy

variables:
  MAVEN_OPTS: "-Dmaven.repo.local=$CI_PROJECT_DIR/.m2/repository"

cache:
  paths:
    - .m2/repository/
    - node_modules/

build:
  stage: build
  image: maven:3.9-eclipse-temurin-17
  script:
    - mvn clean compile
  artifacts:
    paths:
      - target/

test:
  stage: test
  image: maven:3.9-eclipse-temurin-17
  script:
    - mvn test
  coverage: '/Total.*?([0-9]{1,3})%/'
  artifacts:
    reports:
      junit:
        - target/surefire-reports/TEST-*.xml
      coverage_report:
        coverage_format: cobertura
        path: target/site/cobertura/coverage.xml

deploy:
  stage: deploy
  script:
    - echo "Deploying application..."
  only:
    - main

VS Code 中的 CI/CD 監控:

  • GitHub Actions:使用 GitHub Actions 擴充功能查看工作流程狀態
  • GitLab CI/CD:使用 GitLab Workflow 擴充功能監控 Pipeline 狀態
  • 即時通知:CI/CD 狀態變更時接收通知

6.4 效能優化進階技巧

記憶體使用優化:

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/target/**": true
  },
  "search.followSymlinks": false
}

6.5 遠端開發與 SSH

Remote Development 擴充套件包目前包含四個延伸模組,依情境選用:

擴充功能適用情境
Remote - SSH透過 SSH 連線到任意遠端主機/VM 開發
Dev Containers於 Docker/OCI 容器內開發(見 2.4 節)
WSL於 Windows Subsystem for Linux 內開發
Remote - Tunnels透過安全通道連接遠端機器,不需預先設定 SSH,適合防火牆較嚴格或無法開放連接埠的環境

每種擴充功能都會在遠端作業系統安裝獨立的 VS Code Server,本機端不需要存放任何原始碼;絕大多數 VS Code 擴充功能無需修改即可在遠端環境中運作。

6.5.1 Remote SSH 設定

安裝 Remote SSH 擴充功能:

code --install-extension ms-vscode-remote.remote-ssh

SSH 設定檔配置:

# ~/.ssh/config
Host dev-server
    HostName 192.168.1.100
    User developer
    Port 22
    IdentityFile ~/.ssh/id_rsa
    ForwardAgent yes

連線到遠端伺服器:

  1. Ctrl + Shift + P → Remote-SSH: Connect to Host
  2. 選擇預設的主機或輸入新的連線
  3. 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 遠端開發最佳實務

檔案同步策略:

  • 使用 Git 進行版本控制
  • 避免直接編輯生產環境檔案
  • 設定適當的檔案排除規則

效能優化:

{
  "remote.SSH.enableDynamicForwarding": false,
  "remote.SSH.maxReconnectionAttempts": 3,
  "remote.SSH.enableRemoteCommand": true
}

6.6 工作區管理進階技巧

6.6.1 多根工作區 (Multi-root Workspace)

建立多根工作區:

// myproject.code-workspace
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Documentation",
      "path": "./docs"
    }
  ],
  "settings": {
    "files.exclude": {
      "**/node_modules": true,
      "**/target": true
    }
  },
  "extensions": {
    "recommendations": [
      "ms-vscode.vscode-typescript-next",
      "vscjava.vscode-java-pack"
    ]
  }
}

6.6.2 工作區範本

建立專案範本:

# 建立專案範本資料夾
mkdir project-template
cd project-template

# 建立基本結構
mkdir .vscode
touch .vscode/settings.json
touch .vscode/tasks.json
touch .vscode/launch.json

範本設定檔:

// .vscode/settings.json 範本
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "java.configuration.updateBuildConfiguration": "automatic",
  "spring.boot.java.mainClass": "com.example.Application"
}

6.7 設定檔 (Profiles) 管理

VS Code Profiles 讓你為不同開發情境(前端、後端、資料科學等)切換不同的設定組合,包括擴充功能、設定、鍵盤快捷鍵和 UI 狀態。

6.7.1 建立與切換 Profile

建立新 Profile:

  1. 點擊左下角齒輪圖示 → Profiles
  2. 選擇 Create Profile…
  3. 輸入名稱(如「Java 開發」「前端開發」「Python 開發」)
  4. 選擇要從現有 Profile 複製的項目,或從空白開始

快速切換 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 範本:

範本名稱包含的擴充功能與設定
PythonPython、Pylance、Jupyter、Ruff 等
Data SciencePython、Jupyter、資料視覺化工具
Node.jsESLint、npm Intellisense、REST Client 等
Java GeneralJava Extension Pack、Maven、Checkstyle 等
Java SpringSpring Boot Extension Pack、Java Extension Pack 等

6.7.3 匯出與分享 Profile

匯出 Profile:

  1. Ctrl + Shift + P → Profiles: Export Profile...
  2. 選擇要匯出的項目
  3. 選擇匯出方式:
    • GitHub Gist:產生可分享的連結
    • Local File:儲存為 .code-profile 檔案

匯入 Profile:

  1. Ctrl + Shift + P → Profiles: Import Profile...
  2. 貼上 GitHub Gist 連結或選擇本機檔案

團隊建議:將專案推薦的 Profile 匯出為 GitHub Gist,新進成員可以一鍵匯入,快速完成開發環境設定。

6.7.4 資料夾與工作區關聯

可以將特定 Profile 自動綁定到特定專案資料夾:

  1. 開啟目標專案資料夾
  2. Ctrl + Shift + P → Profiles: Associate Profile with Folder...
  3. 選擇想關聯的 Profile

之後每次開啟該資料夾,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 面板的齒輪圖示進入

6.8.2 可管理的項目

項目說明
Custom Instructions集中瀏覽與編輯所有客製化指令檔(copilot-instructions.md、.instructions.md、AGENTS.md、CLAUDE.md)
MCP Servers檢視所有已設定的 MCP 伺服器、啟用/停用個別伺服器
Custom Agents管理 .agent.md 定義的自訂 Agent 與子代理關係
Agent Skills瀏覽已安裝的 Agent Skills(見 3.6.11 節)
Prompt Files瀏覽 .prompt.md 可重複使用的 Prompt 檔案
Hooks管理 Agent 生命週期的前/後置腳本
Plugins安裝與管理 Agent Plugins(見 3.6.15 節)
Language Models選擇並釘選預設使用的語言模型

每個項目都會標示其來源(內建 / 使用者層級 / 工作區層級 / 組織層級 / 擴充功能),並提供診斷資訊協助排查設定衝突。

6.8.3 使用情境

典型工作流程:
1. 使用 Agent Customizations 編輯器確認所有設定正確
2. 新增或修改 MCP Server 設定
3. 調整 Custom Instructions 優先順序
4. 確認 Agent 權限層級與已安裝的 Plugins

提示:Agent Customizations 編輯器會顯示所有作用域(使用者層級、工作區層級、資料夾層級、組織層級)的設定,方便一覽全貌。

6.9 企業級管理與治理原則 (Enterprise Policies)

VS Code 提供完整的企業治理機制,讓 IT 部門能在受管理的裝置上集中設定政策、限制擴充功能來源,並針對近年快速發展的 AI Agent 功能訂立使用邊界。詳細規格請參閱 VS Code for Enterprise 官方文件。

6.9.1 集中部署與原則管理

部署/管理方式說明
Microsoft Intune透過 MDM 集中部署原則設定
Active Directory 群組原則 (ADMX)於 Windows 網域環境套用原則範本
macOS MDMmacOS 裝置的集中管理方案
Settings Sync確保跨裝置設定一致性
預先安裝擴充功能於機器映像中預先安裝,首次啟動即可用

擴充功能治理:

{
  "extensions.allowed": {
    "publisher.extension-id": true,
    "unwanted-publisher.*": false
  }
}

可依發佈者、擴充功能 ID 或版本進行允許清單控管,並可設定私有/自架 Marketplace(ExtensionGalleryServiceUrl)取代公開 Marketplace。

6.9.2 AI/Agent 治理原則(近期擴充重點)

隨著 Agent 功能快速發展,VS Code 企業原則已大幅擴充至 AI 治理範疇,涵蓋網路存取控制、沙箱執行與可觀測性:

原則對應設定用途
ChatAgentModechat.agent.enabled啟用/停用 Agent 模式
ChatAgentNetworkFilterChatAgentAllowedNetworkDomains / ChatAgentDeniedNetworkDomains限制 Agent 工具呼叫可存取的網域
ChatAgentSandboxEnabledChatAgentSandboxAllowNetwork、ChatAgentSandboxAllowAutoApprove控制 Agent 沙箱執行環境的網路與自動核准權限
Claude3PIntegration / Codex3PIntegrationchat.agentHost.claudeAgent.enabled / chat.agentHost.codexAgent.enabled啟用/停用第三方代理主機(Claude Agent、Codex Agent)
ChatMCPchat.mcp.access控制 MCP 存取層級
ChatAllowedMcpServers / ChatDeniedMcpServers—MCP 伺服器允許/拒絕清單
ChatAllowManagedMcpServersOnly—強制僅允許企業代管的 MCP 伺服器
ChatHookschat.useHooks啟用/停用 Hooks 功能
ChatToolsAutoApprovechat.tools.global.autoApprove控制工具自動核准原則
CopilotOtelEnabledCopilotOtelEndpoint、CopilotOtelProtocol 等將 Copilot / Agent 遙測資料匯出至企業自建的 OpenTelemetry 收集器

企業導入建議:導入 Agent 功能前,建議資安團隊優先評估 ChatAgentNetworkFilter(網域白名單)、ChatAgentSandboxEnabled(沙箱隔離)與 ChatAllowManagedMcpServersOnly(MCP 供應鏈控管)三項原則,作為降低 Agent 對外部系統誤操作風險的第一道防線;OTel 匯出功能則可協助建立 Agent 操作的稽核與合規紀錄。

6.9.3 網路與代理伺服器設定

設定用途
http.proxy指定 HTTPS Proxy 位址
http.proxyStrictSSL是否嚴格驗證 Proxy SSL 憑證
http.noProxy不經過 Proxy 的網域清單

必要對外連線網域(防火牆允許清單):

update.code.visualstudio.com
marketplace.visualstudio.com
*.gallery.vsassets.io
vscode.download.prss.microsoft.com

VS Code 預設會直接沿用作業系統的 Proxy 設定;企業網路若採用自簽憑證,須額外設定信任的憑證鏈結。


7. 最佳實務

7.1 常見問題 (FAQ) 與解決方式

7.1.1 安裝與設定問題

Q1: VS Code 啟動速度很慢

解決方案:

  1. 檢查安裝的擴充功能數量,移除不必要的擴充功能
  2. 清理 VS Code 快取:
    # 關閉 VS Code 後執行
    Remove-Item -Recurse -Force "$env:APPDATA\Code\User\workspaceStorage"
    Remove-Item -Recurse -Force "$env:APPDATA\Code\CachedExtensions"
  3. 使用 Developer: Reload Window 重新載入視窗

Q2: 擴充功能無法正常運作

解決方案:

  1. 檢查擴充功能是否為最新版本
  2. 重新安裝問題擴充功能
  3. 檢查工作區設定是否正確
  4. 查看 Output 面板的錯誤訊息

Q3: Java 專案無法正確識別

解決方案:

  1. 確認已安裝 “Extension Pack for Java”
  2. 檢查 Java 版本:java -version
  3. 重新匯入專案:Ctrl + Shift + P → Java: Reload Projects
  4. 檢查 .vscode/settings.json 中的 Java 路徑設定

7.1.2 開發環境問題

Q4: 前端熱重載不工作

解決方案:

  1. 檢查開發伺服器是否正常啟動
  2. 確認檔案監視功能正常:
    # 增加檔案監視限制
    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
  3. 檢查防火牆設定是否阻擋連接埠

Q5: Git 整合顯示錯誤

解決方案:

  1. 檢查 Git 是否正確安裝:git --version
  2. 設定 Git 使用者資訊:
    git config --global user.name "Your Name"
    git config --global user.email "your.email@company.com"
  3. 重新初始化 Git 倉庫

Q6: 偵錯無法啟動

解決方案:

  1. 檢查 launch.json 設定是否正確
  2. 確認專案已正確編譯
  3. 檢查連接埠是否被佔用
  4. 查看 Debug Console 的錯誤訊息

7.1.3 效能最佳化問題

Q7: 編輯器回應緩慢

解決方案:

  1. 關閉不必要的檔案分頁
  2. 排除大型檔案和資料夾:
    {
      "files.exclude": {
        "**/node_modules": true,
        "**/target": true,
        "**/.git": true,
        "**/dist": true
      }
    }
  3. 調整 TypeScript 服務設定:
    {
      "typescript.suggest.enabled": false,
      "typescript.validate.enable": false
    }

7.2 建議的工作習慣

7.2.1 自動化設定

自動儲存設定:

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000
}

自動格式化設定:

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit",
    "source.removeUnusedImports": "explicit"
  }
}

自動完成設定:

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.acceptSuggestionOnEnter": "on"
}

7.2.2 程式碼品質習慣

1. 定期 Commit 習慣

  • 每完成一個小功能就提交
  • 使用有意義的提交訊息
  • 遵循團隊的提交訊息格式

範例提交訊息格式:

feat: 新增用戶註冊功能
fix: 修正登入驗證問題
docs: 更新 API 文件
style: 調整程式碼格式
refactor: 重構用戶服務層
test: 新增用戶服務測試

2. 程式碼審查習慣

  • 建立 Pull Request 進行程式碼審查
  • 使用 GitHub/GitLab 的審查功能
  • 遵循團隊的審查標準

3. 測試習慣

  • 撰寫單元測試
  • 執行自動化測試
  • 維持高測試覆蓋率

7.2.3 工作區管理習慣

檔案組織習慣:

  1. 使用一致的檔案命名規則
  2. 適當使用資料夾結構
  3. 定期清理不需要的檔案

設定同步習慣:

  1. 使用 VS Code 設定同步功能
  2. 備份重要的設定檔案
  3. 定期更新擴充功能

7.3 效能最佳化

7.3.1 編輯器效能優化

記憶體使用優化:

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true,
    "**/target/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/dist": true
  }
}

CPU 使用優化:

{
  "editor.minimap.enabled": false,
  "editor.semanticHighlighting.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.hover.enabled": false
}

推薦功能 — Sticky Scroll:啟用 "editor.stickyScroll.enabled": true 可在捲動時將目前的類別、函式等作用域標題固定在編輯器頂部,方便瀏覽大型檔案。

7.3.2 專案載入優化

大型專案設定:

{
  "typescript.preferences.includePackageJsonAutoImports": "off",
  "typescript.suggest.autoImports": false,
  "typescript.surveys.enabled": false,
  "files.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/.git": true
  }
}

7.4 安全性最佳實務

7.4.1 敏感資訊保護

環境變數使用:

// 正確做法:使用環境變數
const API_KEY = process.env.REACT_APP_API_KEY;
const DB_PASSWORD = process.env.DB_PASSWORD;

// 錯誤做法:直接寫在程式碼中
const API_KEY = "sk-1234567890abcdef"; // 不要這樣做!

VS Code 設定檔案保護:

// .vscode/settings.json - 不要提交敏感設定
{
  "java.configuration.runtimes": [
    {
      "name": "JavaSE-17",
      "path": "${env:JAVA_HOME}"  // 使用環境變數
    }
  ],
  "spring.datasource.password": "${env:DB_PASSWORD}"
}

設定檔案保護最佳實務:

  1. 將敏感設定加入 .gitignore:
    # 敏感設定檔
    .env
    .env.local
    .env.production
    application-prod.properties
    
    # VS Code 敏感設定
    .vscode/settings.json
  2. 使用 .env.example 提供範本
  3. 定期檢查是否有敏感資訊被提交:
    # 掃描歷史提交中的敏感資訊
    git log --all --full-history -- **/*.env

7.4.2 憑證與金鑰管理

GitHub/GitLab 存取權杖安全:

// 設定檔範例
{
  "github.gitAuthentication": true,
  "gitlab.instanceUrl": "${env:GITLAB_URL}",
  "gitlab.personalAccessToken": "${env:GITLAB_TOKEN}"
}

安全存儲建議:

  • 使用 Windows 憑證管理員
  • 定期輪換存取權杖
  • 設定權杖到期時間
  • 只授予必要的權限範圍

7.4.3 依賴套件安全

定期更新依賴:

# 前端依賴更新
npm audit
npm audit fix --force

# 檢查過時套件
npm outdated

# 後端依賴檢查
mvn dependency-check:check
mvn versions:display-dependency-updates

使用安全掃描工具:

  • SonarLint 擴充功能:即時程式碼品質檢查
  • GitHub Dependabot alerts:自動依賴安全警告
  • GitLab Dependency Scanning:CI/CD 整合掃描
  • OWASP Dependency Check:開源依賴漏洞檢查

擴充功能安全設定:

{
  "extensions.autoCheckUpdates": true,
  "extensions.autoUpdate": false,  // 手動審查更新
  "telemetry.telemetryLevel": "off",  // 關閉遙測
  "update.showReleaseNotes": false
}

7.4.4 程式碼掃描與分析

SonarQube 整合:

// .vscode/settings.json
{
  "sonarlint.connectedMode.project": {
    "connectionId": "your-sonarqube-server",
    "projectKey": "your-project-key"
  }
}

安全編碼檢查清單:

  • 輸入驗證與 SQL 注入防護
  • XSS 防護
  • CSRF 權杖驗證
  • 敏感資料加密
  • 適當的錯誤處理
  • 安全的認證與授權

7.4.5 開發環境隔離

容器化開發環境:

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/vscode/devcontainers/java:17

# 安全設定
RUN useradd -m -s /bin/bash developer && \
    usermod -aG sudo developer

USER developer
WORKDIR /workspace

# 安裝安全工具
RUN npm install -g audit-ci

網路安全設定:

// .devcontainer/devcontainer.json
{
  "forwardPorts": [3000, 8080],
  "portsAttributes": {
    "3000": {
      "label": "Frontend Dev Server",
      "requireLocalPort": true
    }
  }
}

7.4.6 工作區信任 (Workspace Trust)

VS Code 的 Workspace Trust 功能可防止不受信任的程式碼自動執行,保護開發環境安全。

運作方式:

  • 開啟新資料夾時,VS Code 會詢問是否信任該工作區
  • 受信任模式:所有功能正常運作(擴充功能、終端機、偵錯、任務等)
  • 受限模式:停用可能執行程式碼的功能(如自動格式化、任務執行、部分擴充功能)

設定信任規則:

{
  // 信任的資料夾清單
  "security.workspace.trust.untrustedFiles": "prompt",
  "security.workspace.trust.enabled": true,
  "security.workspace.trust.startupPrompt": "once"
}

管理信任設定:

  1. Ctrl + Shift + P → Workspaces: Manage Workspace Trust
  2. 在設定中新增信任的父資料夾路徑
  3. 信任父資料夾後,其所有子資料夾自動受信任

建議:將你的開發主目錄(如 D:\developer\repos)設為信任資料夾,避免每次開啟專案都要確認。

7.5 團隊協作規範

7.5.1 編碼標準統一

團隊設定同步:

// 團隊共用 settings.json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "files.encoding": "utf8",
  "files.eol": "\n",
  "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguide/gh-pages/eclipse-java-google-style.xml"
}

強制格式化規則:

// .vscode/settings.json (專案層級)
{
  "eslint.workingDirectories": ["frontend"],
  "java.checkstyle.configuration": "/path/to/checkstyle.xml",
  "prettier.configPath": "./.prettierrc",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[java]": {
    "editor.defaultFormatter": "redhat.java"
  }
}

7.5.2 程式碼審查流程

審查前自動檢查:

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Pre-commit Check",
      "type": "shell",
      "command": "npm run lint && npm run test && mvn checkstyle:check",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

程式碼審查檢查點:

  • 架構設計:是否符合專案架構原則
  • 程式碼品質:可讀性、維護性、複用性
  • 效能考量:演算法效率、資源使用
  • 安全性:輸入驗證、權限檢查、敏感資料處理
  • 測試覆蓋:單元測試、整合測試
  • 文件完整性:註解、README、API 文件

7.5.3 版本控制協作

分支命名規範:

# 功能開發
feature/user-authentication
feature/payment-integration

# 修復問題
bugfix/login-error
hotfix/security-patch

# 版本發佈
release/v2.1.0

Commit 訊息規範:

# 格式:<type>(<scope>): <description>
feat(auth): add JWT token validation
fix(payment): resolve currency conversion bug
docs(readme): update installation instructions
test(user): add unit tests for user service
refactor(api): simplify error handling logic

合併策略設定:

// .vscode/settings.json
{
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.pullTags": true,
  "gitlens.codeLens.enabled": true,
  "gitlens.blame.compact": false
}

8. 檢查清單

8.1 新進成員快速上手檢查清單

✅ 環境安裝檢查

基本環境:

  • 安裝 Visual Studio Code
  • 安裝 Git
  • 安裝 Node.js (版本 20+ LTS)
  • 安裝 Java (版本 17+)
  • 安裝 Maven (獨立安裝或使用內建版本)
  • 設定 Git 使用者資訊
  • 設定 JAVA_HOME 環境變數
  • 設定 MAVEN_HOME 環境變數 (獨立安裝時)

Maven 設定檢查:

  • 設定 maven.executable.path 指向正確的 Maven 執行檔
  • 設定 maven.terminal.customEnv 環境變數
  • 設定 Maven settings.xml 路徑
  • 驗證 Maven 版本:mvn -version
  • 測試 Maven 專案載入功能

字型與主題:

  • 安裝推薦字型 (JetBrains Mono 或 Fira Code)
  • 選擇適合的佈景主題
  • 設定字型大小和行高

✅ 擴充功能安裝檢查

基礎工具:

  • Chinese (Traditional) Language Pack
  • GitLens
  • Auto Rename Tag
  • indent-rainbow
  • Path Intellisense

前端開發:

  • Volar (Vue Language Features)
  • TypeScript Importer
  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense
  • Auto Close Tag

後端開發:

  • Extension Pack for Java
  • Spring Boot Extension Pack
  • Maven for Java
  • Checkstyle for Java
  • SonarLint

Python 開發:

  • Python
  • Pylance
  • Ruff
  • Jupyter

AI 輔助開發:

  • 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
  • 設定專案特定的程式碼格式化規則

Git 整合:

  • 連結 GitHub/GitLab 帳號
  • 設定 SSH 金鑰
  • 測試 Git 操作功能
  • 設定 .gitignore 檔案

8.2 日常開發檢查清單

✅ 開發前檢查

環境準備:

  • 更新到最新的 VS Code 版本
  • 檢查擴充功能更新
  • 拉取最新的程式碼變更
  • 確認開發分支正確

專案狀態:

  • 檢查依賴套件更新
  • 執行單元測試
  • 檢查程式碼品質掃描結果
  • 確認開發伺服器正常運作

✅ 開發中檢查

程式碼品質:

  • 遵循專案編碼規範
  • 執行格式化檢查
  • 處理 Linting 警告
  • 撰寫適當的註解

功能開發:

  • 撰寫單元測試
  • 執行功能測試
  • 檢查錯誤處理機制
  • 驗證效能影響

✅ 提交前檢查

程式碼審查:

  • 自我程式碼審查
  • 檢查是否有調試程式碼殘留
  • 確認敏感資訊已移除
  • 檢查 import 和依賴項

測試驗證:

  • 執行完整測試套件
  • 檢查測試覆蓋率
  • 執行整合測試
  • 驗證 CI/CD Pipeline 通過

8.3 部署前檢查清單

✅ 生產環境準備

環境設定:

  • 檢查環境變數設定
  • 確認資料庫連線設定
  • 檢查 API 端點配置
  • 驗證 CORS 設定

安全性檢查:

  • 移除開發用的 debug 模式
  • 檢查 API 金鑰和密碼保護
  • 確認 HTTPS 設定
  • 執行安全性掃描

效能檢查:

  • 執行效能測試
  • 檢查資源使用情況
  • 優化圖片和靜態資源
  • 檢查快取設定

CI/CD 檢查:

  • GitHub Actions 或 GitLab CI/CD Pipeline 成功執行
  • 所有測試通過
  • 程式碼審查已完成
  • 部署腳本已驗證
  • 回滾計劃已準備

8.4 故障排除檢查清單

✅ 常見問題診斷

VS Code 問題:

  • 重新啟動 VS Code
  • 重新載入視窗 (Developer: Reload Window)
  • 檢查擴充功能狀態
  • 查看輸出和問題面板

專案問題:

  • 清理並重新建置專案
  • 重新安裝依賴套件
  • 檢查 Node.js/Java 版本
  • 確認路徑和檔案權限

Git 問題:

  • 檢查 Git 狀態:git status
  • 解決合併衝突
  • 檢查遠端分支連線
  • 重新設定 Git 認證

效能問題:

  • 檢查 CPU 和記憶體使用率
  • 關閉不必要的擴充功能
  • 清理工作區快取
  • 優化檔案監視設定

9. 附錄

9.1 參考資源

官方文件:

AI / Agent 相關文件:

企業與治理:

學習資源:

社群資源:

工具與擴充功能:

文件時效性提醒:本節連結均於 2026 年 8 月查證有效;GitHub Copilot 相關功能迭代速度遠快於 VS Code 核心版本(約每月更新),建議讀者以 VS Code Release Notes 及 GitHub Changelog 的「GitHub Copilot in Visual Studio Code」系列文章掌握最新異動。

9.2 版本歷程

版本日期更新內容作者
5.02026-08-24依官方文件全面查證更新(對應 VS Code v1.134):3.6 節 AI/Agent 章節大幅改寫(Edit 模式移除並併入 Agent 模式、新增 Assisted Permissions、Plan Agent 四階段流程與 Handoffs、Agent Skills 轉為 GA、新增 3.6.15 Agent Plugins);新增 6.9 企業級管理與治理原則(含 AI/Agent 治理原則);更新 Settings Sync(Profiles 同步)、Source Control(Graph/Timeline/Worktrees/AI 提交訊息)、Debugging(行內/資料斷點)、Terminal(Shell Integration/Sticky Scroll/Terminal Chat)、Dev Containers(Features/生命週期腳本)、Remote Development(Remote - Tunnels)、擴充功能發佈(Entra ID/PAT 淘汰提醒)等章節;修正 Markdown 格式與目錄連結問題開發團隊
4.02026-03-11配合 VS Code v1.111 全面更新 Copilot / Agent 章節:新增 Agent Mode、Autopilot、MCP Servers、Custom Agents、Skills、Prompt Files、Hooks、Chat Customizations 編輯器;Copilot Chat 已合併至 Copilot 主擴充功能;更新參考資源連結開發團隊
3.02025-08-29新增 GitHub Copilot/AI 輔助開發、Profiles 管理、Workspace Trust、三方合併編輯器;更新 Python 工具為 Ruff;移除已棄用擴充功能開發團隊
2.02025-08-29新增 GitLab 整合、安全性最佳實務、遠端開發開發團隊
1.52025-08-01新增 CI/CD 整合、容器化開發環境開發團隊
1.02025-07-01初版發佈,基本功能教學開發團隊

文件版本:5.0
最後更新:2026年8月24日
維護團隊:開發部技術團隊