探索 Agent 式開發 -

教學：在 VS Code 中使用代理程式 (Agents)

本教學將引導您在 Visual Studio Code 中使用不同類型的代理程式。您將從頭開始建立一個待辦事項 (todo) 應用程式、新增佈景主題切換功能，並透過將工作委派給本地、計畫、背景和雲端代理程式來重新設計版面配置。

提示

如果您尚未訂閱 Copilot，可以透過註冊 Copilot 免費方案 來免費使用 Copilot，並獲得每月的內嵌建議和聊天互動額度。

先決條件

若要完成此教學，您需要

步驟 1：使用本地代理程式建立應用程式初始結構

在此步驟中，您將使用本地代理程式來建立初始的待辦事項應用程式結構。本地代理程式非常適合用於需要即時回饋與結果的互動式任務，例如建構新專案的初始結構或反覆調整新功能。

  1. 建立一個新的專案資料夾，並確保其處於 Git 版本控制之下。

    mkdir todo-app
cd todo-app
git init

  2. 在 VS Code 中開啟該專案資料夾。

  3. 開啟聊天 (Chat) 檢視 (⌃⌘I (Windows, Linux Ctrl+Alt+I))，並從 Agents 下拉選單中選擇 Agent。

    （選填）如果您有偏好，可以選擇特定的語言模型。

    重要

    如果您沒有看到代理程式 (agent) 選項，請確保已在 VS Code 設定中啟用代理程式 ( chat.agent.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 此設定由組織層級管理。請聯絡您的管理員進行變更。)。您的組織也可能已停用代理程式 — 請聯絡您的管理員以啟用此功能。

  4. 在聊天輸入欄位中輸入以下提示以建立待辦事項應用程式的初始結構，然後選擇 Send (傳送)。

    Create a simple todo app with HTML, CSS, and JavaScript. Include an input field to add todos, a list to display them, and a delete button for each item.

  5. 檢閱代理程式為應用程式產生的不同檔案。視需要使用 Keep (保留) 或 Undo (復原) 來接受或拒絕變更。

  6. 您可以在整合式瀏覽器中預覽變更。

    • 透過設定 workbench.browser.openLocalhostLinks 在 VS Code 中開啟 在 VS Code Insiders 中開啟 為 localhost URL 啟用整合式瀏覽器。

    • 開啟 index.html 檔案並選擇 Preview (預覽) 按鈕。

  7. 傳送額外的提示以進一步增強應用程式。請注意，預覽會隨著您進行變更而即時更新。

    例如，您可以詢問

    Mark todos as completed with a strikethrough effect.

您現在有了一個可運作的待辦事項應用程式，可以進一步擴充更多功能。透過使用本地代理程式，您可以即時地以互動方式產生並優化程式碼。

步驟 2：使用 Copilot CLI 實作功能計畫

在此步驟中，您將使用計畫 (plan) 代理程式來建立實作佈景主題切換的實作計畫，然後將實作工作交給背景執行的 Copilot CLI。Copilot CLI 非常適合委派不需要立即互動的任務。它們可以使用 Git 工作樹 (worktrees) 來將檔案變更與您的主要工作區隔離，以防止衝突。

  1. 首先，在「原始碼控制」檢視中提交目前的變更，以確保處於乾淨的狀態。

  2. 在聊天檢視中，選擇 New Chat (+) > New Chat 以開始新的本地代理程式工作階段。請注意，您之前的聊天工作階段會保留在工作階段清單中。

  3. 從 Agents 下拉選單中選擇 Plan 以切換到計畫代理程式，並輸入以下提示

    Create a plan to add a dark/light theme toggle to the app. The toggle should switch between themes and persist the user's preference.

  4. 計畫代理程式可能會詢問釐清性質的問題以優化計畫。請視需要回應。

  5. 準備就緒後，選擇 Start Implementation (開始實作) > Continue in Copilot CLI (在 Copilot CLI 中繼續) 將計畫交給 Copilot CLI。

    Screenshot showing the Start Implementation button in the Chat view.

  6. Copilot CLI 會建立一個 Git 工作樹並在那裡開始實作功能。出現提示時，選擇 Copy Changes (複製變更) 以確保 Copilot CLI 可以使用所有目前的變更。

  7. 您可以在 Sessions (工作階段) 檢視中追蹤 Copilot CLI 工作階段。選擇該工作階段以查看其進度詳細資訊。

    提示

    當 Copilot CLI 在背景運作時，您可以繼續編輯主要工作區而不會發生衝突。

  8. 當代理程式完成後，選擇任何變更的檔案以檢閱其變更，或選擇 View All Changes (檢視所有變更) 以在多檔案差異編輯器中開啟所有變更。

    提示

    您可以向 Copilot CLI 傳送後續提示，以對功能進行調整或改進。

  9. 在聊天檢視中，選擇 Apply (套用) 將變更套用到您的主要工作區。

您已成功使用 Copilot CLI 在背景中自動執行任務。您可以針對不同的任務啟動多個 Copilot CLI 工作階段，而不會中斷您的主要工作流程。

步驟 3：使用雲端代理程式協作開發功能

在此步驟中，您將使用雲端代理程式 (Copilot coding agent) 來重新設計應用程式版面配置，並使用 GitHub 中的提取請求 (pull request) 與協作功能。雲端代理程式在遠端基礎架構上執行，非常適合不需要即時回饋、不需要在本地執行或涉及透過 GitHub 進行協作的任務。

  1. 首先，將專案發布到 GitHub 儲存庫，並將其新增為遠端儲存庫，以便在您的專案中使用雲端代理程式。

    1. 從指令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 執行 Publish to GitHub (發布至 GitHub) 指令，並按照提示建立新的儲存庫。

    2. 從指令面板執行 Git: Add Remote (新增遠端) 指令，並按照提示將您的 GitHub 儲存庫新增為遠端。

  2. 在聊天檢視中，選擇 New Chat (+) > New Chat。

  3. 從工作階段類型下拉選單中選擇 Cloud 以切換到雲端代理程式，並輸入以下提示

    Redesign the todo app layout to improve user experience. Update colors, spacing, typography, and add animations to give it a modern look.

  4. 雲端代理程式會啟動一個新的工作階段來處理您的請求。它會在您的 GitHub 儲存庫中建立分支和提取請求 (pull request)。

  5. 您可以在聊天檢視的 Sessions (工作階段) 檢視中追蹤雲端代理程式，或選擇連結以檢視提取請求詳細資訊。

    提示

    如果您安裝了 GitHub Pull Requests 擴充功能，您也可以在 GitHub Pull Requests 檢視的 Copilot on my Behalf 檢視中追蹤提取請求的進度。

  6. 完成後，雲端代理程式會將該提取請求指派給您進行檢閱。

    Screenshot showing the cloud agent session details, with the file change details.

  7. 在 Sessions (工作階段) 檢視中右鍵點擊雲端代理程式工作階段以查看其他選項，或選擇該工作階段並選擇 Checkout (取出) 或 Apply (套用)。

您已成功使用雲端代理程式透過 GitHub 協作開發功能。雲端代理程式使您能夠使用遠端資源，並透過 GitHub 議題 (issues) 和提取請求來協作處理變更。

後續步驟

您已成功使用不同類型的代理程式來建構、增強和重新設計待辦事項應用程式。繼續探索代理程式：

4/8/2026
English 한국어 中文(简体) 中文(繁體)
© . This site is unofficial and not affiliated with Microsoft.