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

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

先決條件

完成本教學，您需要具備：

• 電腦上已安裝 Visual Studio Code
• 在 VS Code 中安裝 Live Preview 擴充功能（用於預覽待辦事項應用程式）
• 一個 GitHub 帳號（用於雲端代理工作流程）
• GitHub Copilot 訂閱

步驟 1：使用本機代理程式建構應用程式架構

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

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

   mkdir todo-app
   cd todo-app
   git init
   

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

3. 開啟「聊天」(Chat) 檢視 (⌃⌘I (Windows, Linux Ctrl+Alt+I))，並從代理程式下拉式選單中選擇 **Agent**。

   您可以根據偏好選擇特定的語言模型。

   重要

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

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 網址的整合式瀏覽器。

   • 開啟 index.html 檔案並選擇 **Preview** 按鈕。

     

     注意

     如果您沒有看到預覽按鈕，請確保已安裝 Live Preview 擴充功能。

7. 發送其他提示以進一步增強應用程式。請注意，當您進行變更時，預覽會即時更新。

   例如，您可以要求：

   Mark todos as completed with a strikethrough effect.
   

現在您擁有了一個可以透過額外功能進行擴充的待辦事項應用程式。透過使用本機代理程式，您可以即時互動地產生並完善您的程式碼。

步驟 2：使用 Copilot CLI 執行功能規劃

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

1. 首先，在「原始檔控制」(Source Control) 檢視中提交您目前的變更，以確保狀態整潔。

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

3. 從代理程式下拉式選單中選擇 **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。

   

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 雲端代理) 來重新設計應用程式版面，並使用 GitHub 的提取要求 (pull requests) 和協作功能。Copilot 雲端代理程式在遠端基礎架構上執行，非常適合不需要立即回饋、不需要在本地執行，或涉及透過 GitHub 協作的任務。

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

   1. 從命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 執行 **Publish to 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 儲存庫中建立一個分支與提取要求。

5. 您可以在「聊天」檢視中的 **Sessions** 檢視追蹤雲端代理程式，或選擇連結以檢視提取要求詳情。

   提示

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

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

   

7. 在 **Sessions** 檢視中對雲端代理程式工作階段按一下右鍵以查看其他選項，或選擇該工作階段並選擇 **Checkout** 或 **Apply**。

您已成功使用雲端代理程式透過 GitHub 進行功能協作。雲端代理程式使您能夠使用遠端資源，並透過 GitHub Issues 和提取要求協作變更。

後續步驟

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

• 了解 代理程式類型及其使用時機
• 使用規劃代理程式 (Plan agent) 來規劃與研究任務
• 探索 建立自訂代理程式