在 VSCode 上 GitHub Copilot 實際應用 AI Agent 開發協作

前言
#

最近在工作上因為公司有買企業版的 GitHub Copilot，所以就逐漸將我的常用IDE 轉換成 VS Code 了。用了一段時間發現 GitHub Copilot 其實蠻好用的，除了平常用來補完程式碼之外，也可以請它幫忙分析專案、修改檔案，甚至串接 Figma 這類外部工具。

這篇文章就來整理一下我平常怎麼在 VS Code 使用 GitHub Copilot 的方式，從安全設定、聊天模式，到 Prompt、MCP、Hooks 和 Skill 都會簡單帶到。

使用前的安全考量
#

先確認資料使用設定
#

首先，在公司內使用 AI 工具時，還是要先確認公司的資料保護政策，避免不小心把機敏資料貼出去。除了確認工具本身會怎麼使用資料，自己在輸入內容之前也要先看一下，確認裡面沒有不該提供的資訊。

從下面的設定畫面可以看到 Copilot 的資料使用選項。Copilot 預設不會使用資料協助產品訓練，不過實際使用前還是建議自己確認一次。不要因為 Copilot 看起來只是聊天工具，就直接貼上公司內的機敏資料，送出之前先確認內容。

限制 Agent 可以做的事情
#

Copilot Agent 不只是回答問題，它還能實際修改檔案和執行終端機指令，所以也要注意提示注入（Prompt Injection）等攻擊。目前沒有百分之百安全的防禦方式，能做的就是先把權限限制好，把風險降到最低。

在開始使用 Agent 之前，我通常會先把下面幾件事確認好：

不安裝或使用來源不明的 VS Code 延伸模組、AI Agent Skill 與 MCP。
限制 Agent 編輯敏感檔案的權限。
使用 Agent 代理模式時，優先在 Sandbox 模式中執行。
限制 Agent 可自動執行的終端機指令。

VS Code 本身也有提供一些相關設定，畫面上可以看到目前有哪些權限可以調整：

優先使用可信任來源所提供的 AI 延伸模組。
透過 chat.tools.edits.autoApprove 控制 Agent 可編輯的檔案。
使用 WSL 等 Sandbox 環境隔離延伸模組的執行環境。
透過 chat.tools.terminal.autoApprove 控制 Agent 可執行的終端機指令。

上面兩張圖分別是檔案編輯權限和終端機指令權限的設定畫面。可以依照專案需求，把不希望 Agent 自動執行的項目關閉或改成需要手動確認。

`Copilot Chat` 互動模式
#

在 VS Code 安裝好 GitHub Copilot 套件後，打開右側的聊天視窗（Ctrl+Alt+B）就可以開始使用。打開之後，可以在輸入框旁邊看到目前的模式，Copilot Chat 主要有三種模式，簡單整理如下：

下面是聊天視窗的模式選單，可以看到 Ask、Agent 和 Plan 三種模式。

項目	Ask Mode	Agent Mode	Plan Mode
主要用途	取得建議	直接執行任務	先規劃修改內容
適合情境	詢問問題、解釋程式碼、撰寫範例	大量修改、多檔案任務	重構計畫、架構調整
功能定位	AI 技術顧問	AI 開發助手	AI 架構規劃助手

1. Ask Mode：先問問題
#

Ask Mode 就跟平常使用 ChatGPT 差不多。遇到不熟悉的程式碼時，可以先把程式碼選起來，再請 Copilot 解釋這段在做什麼；也可以直接詢問專案問題或請它產生範例。

聊天視窗也可以引用多段程式碼或其他檔案，這樣 Copilot 就能一起參考相關內容。

2. Agent Mode：讓 Copilot 直接修改
#

切換到 Agent Mode 之後，Copilot 就不只是提供建議，而是會根據對話內容和參考資料，直接幫忙修改程式碼或檔案。

每次修改完成後，畫面上會列出有哪些檔案被改過。這時候可以先逐個檔案 Review，確認內容沒問題之後，再按下接受變更。Agent 幫忙改完不代表就可以直接合併，還是要檢查異動檔案和測試結果。

如果接受修改後想要復原，也可以回到對話前建立的還原檢查點（Checkpoint）。

3. Plan Mode：先把步驟列出來
#

如果要做的事情比較大，或是自己也還沒想好要怎麼改，我會先切換到 Plan Mode。提交需求後，Copilot 大致會依照下面的流程進行：

提交需求後，Copilot 會分析目前的專案與修改範圍。
如果需求有疑問或資訊不足，Copilot 會先提出問題。
回答問題後，Copilot 會產生執行步驟。
確認計畫後，按下 Start Implementation，再切換至 Agent Mode 執行。

畫面上的計畫如果不符合預期，可以繼續跟 Copilot 對話修改。需求還沒想清楚時，先用 Plan Mode 把修改範圍列出來，確認步驟沒問題後，按下 Start Implementation，它就會切換到 Agent Mode 開始執行。

聊天視窗裡的幾個小工具：`@`、`/` 和 `#`
#

在聊天輸入框中輸入 @、/ 或 #，就會跳出可以使用的功能。這幾種指令分別可以指定參考來源、快速執行動作，以及加入目前編輯中的程式碼。

當然，也不一定要記住所有指令，直接用一般文字描述需求，Copilot 通常也會自己判斷要怎麼處理。

從輸入框輸入 @、/ 或 # 後，就會看到可以選擇的項目。下面的畫面就是實際開啟指令選單後的樣子。

`@` 聊天參與者
#

聊天參與者是 Copilot 內建的功能模組，能針對特定領域提供協助。

指令	功能
`@github`	使用 GitHub 專屬 Copilot 技能
`@terminal`	協助處理 VS Code 終端機指令
`@vscode`	協助處理 VS Code 指令與功能
`@workspace`	以整個專案工作目錄作為參考

`/` 斜線指令
#

斜線指令可以快速執行常見動作：

指令	功能
`/clear`	清空目前對話，建立新的聊天對話
`/explain`	解釋指定的程式碼
`/fix`	嘗試修正選取的程式碼
`/tests`	為選取的程式碼建立單元測試

`#` 上下文變數
#

輸入欄通常會自動帶入目前正在編輯的檔案，也可以使用 + 按鈕或輸入 #，加入其他檔案與程式碼範圍。

變數	功能
`#block`	包含目前程式碼區塊
`#class`	包含目前類別
`#function`	包含目前方法
`#<file_name>`	包含指定檔案
`#comment`	包含目前註解

組合使用
#

這些指令可以依照需求組合使用，不需要每次全部加上去。例如：

分析整個專案：使用 @workspace 搭配 /explain，快速理解不熟悉的系統架構。
快速除錯：使用 @terminal 搭配 /explain，讓 Copilot 直接分析終端機輸出的錯誤訊息。

選好指令之後，再補上想問的內容，就可以請 Copilot 直接依照指定的範圍進行分析。

打字時直接取得程式碼建議：`Next Edit Suggestions`
#

程式撰寫建議
#

Copilot 預設會開啟程式撰寫建議（Next Edit Suggestions）。如果沒有看到建議，可以到設定裡確認 github.copilot.nextEditSuggestions.enabled 是否已開啟。

在輸入程式碼時，Copilot 會根據目前的程式內容猜測下一步可能要寫什麼。如果建議符合需求，按下 Tab 就能直接套用，寫一些重複性的程式會快很多。

讓 `Copilot` 更了解目前的專案
#

其實我現在比較少自己從頭寫 Prompt 或 Skill，通常會直接請 AI 先分析專案、自動建立一份，之後再依照實際需求修改。這樣通常比自己從零開始寫快很多，有些流程甚至產生出來就已經可以直接用了。

從這個畫面可以直接選擇要建立 Prompt、Instructions、Hooks 或 Skill，不需要自己先建立完整的檔案結構。

`Prompt`：建立可重複使用的提示
#

如果每次開新對話都要重新提醒 Copilot 相同的規則，可以把這些要求寫成 Prompt，讓它在新對話中自動參考。

在聊天視窗右上角選擇「建立提示（Create Prompt）」，可以自己編寫，也可以直接描述需求，讓 Copilot 幫忙產生。建立完成後，提示檔案會放在 .github/prompts/ 目錄。

`Instructions`：定義專案規範
#

Instructions 可以把專案的架構、程式風格和開發規範整理起來，讓 Copilot Agent 在執行任務時參考。不過它和 Prompt 一樣，也會佔用聊天視窗的上下文視窗（Context Window）。

可以從聊天視窗右上角選擇「建立指示（Create Instructions）」，也可以請 Agent 分析 Workspace 後自動建立。完成後會產生 copilot-instructions.md，Copilot Agent 後續執行任務時會參考這份規範。

`MCP`：連接外部工具
#

前面介紹 MCP 時有提到，它可以讓 AI Agent 透過指定介面和第三方工具互動，GitHub Copilot 也支援 MCP Server。

在延伸模組頁面搜尋 MCP Server，就可以看到目前可以安裝的工具。這次使用的是 Figma MCP Server。

這邊以 Figma MCP Server 為例，實際看一下安裝流程：

在 VS Code 延伸模組中搜尋 Figma MCP Server，找到後選擇安裝至目前 Workspace。
安裝完成後，可以在 .vscode/mcp.json 看到新增的 MCP Server 設定。
啟動 MCP Server 後，畫面會跳到瀏覽器要求登入 Figma，依照畫面完成登入即可。
回到 VS Code 終端機確認連線成功，之後就能在 Copilot Agent 裡使用 Figma 的工具。

這樣一來，就可以把 Figma 裡的 UI 設計交給 Copilot 參考，協助產生對應的前端程式碼。

`Hooks`：在指定事件執行動作
#

Hooks 可以在 Agent 執行流程中的特定時間點觸發指令。GitHub Copilot 支援以下八種事件：

事件	觸發時機
`SessionStart`	使用者提交新會話的第一個提示
`UserPromptSubmit`	使用者提交提示
`PreToolUse`	Agent 呼叫工具之前
`PostToolUse`	工具成功完成之後
`PreCompact`	對話上下文被壓縮之前
`SubagentStart`	產生子 Agent 時
`SubagentStop`	子 Agent 完成時
`Stop`	Agent 會話結束時

可以從聊天視窗右上角建立 Hooks，或在對話框輸入 /create-hook，請 Copilot 根據描述自動建立。建立後的設定會放在 .github/hooks/ 目錄。

例如，我們可以讓 Agent 完成修改後自動執行單元測試。下面的設定會在 Stop 事件觸發時記錄時間，並執行測試腳本：

json

{
  "hooks": {
    "Stop": [
      {
        "type": "command",
        "command": "echo \"[$(date +%Y-%m-%d\\ %H:%M:%S)] Stop 觸發\" >> .github/hooks/logs/hook.log"
      },
      {
        "type": "command",
        "command": "bash .github/hooks/run-tests-after-change.sh 2>&1 | tee -a .github/hooks/logs/hook.log"
      }
    ]
  }
}