教學課程:在 VS Code 中使用代理程式

本教學課程將引導您在 Visual Studio Code 中使用不同類型的代理程式。您將從頭開始建置待辦事項應用程式、新增佈景主題切換器,並透過將工作委派給本機、規劃、背景和雲端代理程式來重新設計版面配置。

提示

如果您尚未擁有 Copilot 訂閱,可以透過註冊 Copilot 免費方案來免費使用 Copilot,並獲得每月一定額度的行內建議與 AI 點數。

先決條件

若要完成本教學課程,您需要:

步驟 1:使用本機代理程式建立應用程式鷹架

在此步驟中,您將使用本機代理程式來建立初始的待辦事項應用程式結構。本機代理程式非常適合需要即時意見反應和結果的互動式工作,例如建立新專案的鷹架或反覆運算新功能。

  1. 建立新的專案資料夾,並確保它受 Git 版本控制。

    mkdir todo-app
    cd todo-app
    git init
    
  2. 在 VS Code 中開啟該專案資料夾。

  3. 開啟聊天檢視(⌃⌘I (Windows、Linux 為 Ctrl+Alt+I)),然後從「代理程式」下拉式方塊中選取代理程式

    (選擇性)如果您有偏好,可以選擇特定的語言模型。

    重要

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

  4. 在聊天輸入欄位中輸入下列提示詞來建立待辦事項應用程式鷹架,然後選取傳送

    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. 檢視代理程式為應用程式產生的不同檔案。視需要使用保留還原來接受或拒絕變更。

  6. 開啟 index.html 檔案,然後選取預覽按鈕以在整合式瀏覽器中檢視應用程式。

    Screenshot showing the Preview button in the top right corner of the editor when an HTML file is open.

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

    例如,您可以詢問:

    Mark todos as completed with a strikethrough effect.
    

您現在擁有一個可以透過其他功能來擴充的運作中待辦事項應用程式。透過使用本機代理程式,您可以即時以互動方式產生並精進程式碼。

步驟 2:使用 Copilot CLI 實作功能計劃

在此步驟中,您將使用規劃代理程式來建立佈景主題切換器的實作計劃,然後在背景將實作交給 Copilot CLI。Copilot CLI 非常適合委派不需要立即互動的工作。它們可以使用 Git 工作樹來將檔案變更與主要工作區隔離,並避免衝突。

  1. 首先,在「原始碼控制」檢視中認可目前的變更,以維持乾淨的狀態。

  2. 在聊天檢視中,選取新聊天 (+) > 新聊天以啟動新的本機代理程式工作階段。請注意,您先前的聊天工作階段會保留在工作階段清單中。

  3. 從「代理程式」下拉式方塊中選取規劃以切換至規劃代理程式,然後輸入下列提示詞:

    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. 當您準備好時,選取開始實作 > 在 Copilot CLI 中繼續,將計劃交給 Copilot CLI。

    Screenshot showing the Start Implementation button in the Chat view.

  6. Copilot CLI 會建立 Git 工作樹並開始在其中實作功能。出現提示時,選取複製變更,以確保 Copilot CLI 可以使用所有目前的變更。

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

    提示

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

  8. 代理程式完成後,選取任何已變更的檔案以檢閱其變更,或選取檢視所有變更以開啟包含所有變更的多檔案差異編輯器。

    提示

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

  9. 在聊天檢視中,選取套用將變更套用至主要工作區。

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

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

在此步驟中,您將使用雲端代理程式 (Copilot 雲端代理程式) 來重新設計應用程式版面配置,並使用 GitHub 中的提取要求與協作功能。Copilot 雲端代理程式會在遠端基礎結構上執行,非常適合不需要立即意見反應、不需要在本機執行,或涉及透過 GitHub 進行協作的工作。

  1. 首先,將專案發布至 GitHub 存放庫,並將其新增為遠端,以便在您的專案上使用 Copilot 雲端代理程式。

    1. 從命令選擇區(⇧⌘P (Windows、Linux 為 Ctrl+Shift+P))執行 發布至 GitHub 命令,並遵循提示建立新的存放庫。

    2. 從命令選擇區執行 Git: 新增遠端 命令,並遵循提示將您的 GitHub 存放庫新增為遠端。

  2. 在聊天檢視中,選取新聊天 (+) > 新聊天

  3. 從工作階段類型下拉式方塊中選取雲端以切換至雲端代理程式,然後輸入下列提示詞:

    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. 您可以在聊天檢視的工作階段檢視中追蹤雲端代理程式,或選取連結來檢視提取要求詳細資料。

    提示

    如果您已安裝 GitHub Pull Requests 擴充功能,也可以在 GitHub Pull Requests 檢視中的代表我的 Copilot 檢視中追蹤提取要求進度。

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

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

  7. 工作階段檢視中以滑鼠右鍵按一下雲端代理程式工作階段以檢視其他選項,或者選取該工作階段並選擇簽出套用

您已成功使用雲端代理程式透過 GitHub 協作開發功能。雲端代理程式可讓您使用遠端資源,並透過 GitHub 問題與提取要求來協作處理變更。

後續步驟

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

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.