教程：在 VS Code 中使用代理 (agents)

本教程将引导您了解如何在 Visual Studio Code 中使用不同类型的代理。您将从头开始构建一个待办事项应用程序，添加主题切换功能，并通过委派本地代理、计划代理、后台代理和云代理的工作来重新设计布局。

先决条件

要完成本教程，您需要

• 在您的计算机上安装 Visual Studio Code
• GitHub 账户 (适用于云代理工作流)
• GitHub Copilot 订阅

步骤 1：使用本地代理 (local agent) 构建应用程序

在此步骤中，您将使用本地代理来创建待办事项应用程序的初始结构。本地代理非常适合交互式任务，您可以从中获得即时反馈和结果，例如搭建新项目或迭代新功能。

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 中打开

   ORG）。您的组织也可能禁用了代理 - 请联系您的管理员以启用此功能。

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. 您可以在集成浏览器中预览更改。

   • 通过配置 来启用集成浏览器处理 localhost URL。

     workbench.browser.openLocalhostLinks

     • 在 VS Code 中打开
     • 在 VS Code Insiders 中打开

   • 打开 index.html 文件，然后选择 **预览** 按钮。

7. 发送更多提示以进一步增强应用程序。请注意，当您进行更改时，预览会实时更新。

   例如，您可以询问

   Mark todos as completed with a strikethrough effect.
   

现在您已经有了一个可用的待办事项应用程序，可以为其添加更多功能。通过使用本地代理，您可以实时交互地生成和完善代码。

步骤 2：使用后台代理 (background agent) 实现功能计划

在此步骤中，您将使用计划代理来创建主题切换功能的实现计划，然后将实现交给后台代理。后台代理非常适合委派不需要立即交互的任务。它们使用 Git 工作区 (worktrees) 将文件更改与您的主工作区隔离开，以防止冲突。

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. 准备就绪后，选择 **开始实现** > **在后台继续** 将计划移交给后台代理。

   

6. 后台代理将创建一个 Git 工作区，并在其中开始实现功能。您可以在 **会话** 视图中跟踪后台代理。选择会话即可查看其进度的详细信息。

   提示

   在后台代理工作期间，您可以继续在主工作区中进行编辑，而不会发生冲突。

7. 后台代理完成后，选择任何已更改的文件以查看其更改，或选择 **查看所有更改** 以打开一个多文件差异编辑器，其中包含所有更改。

   提示

   您可以向后台代理发送后续提示，以对功能进行调整或改进。

8. 在“聊天”视图中，选择 **应用** 将更改应用于您的主工作区。

您已成功使用后台代理在后台自主执行任务。您可以为不同的任务启动多个后台代理，而不会中断您的主要工作流程。

步骤 3：使用云代理 (cloud agent) 协作开发功能

在此步骤中，您将使用云代理（Copilot 编码代理）来重新设计应用程序布局，并利用 GitHub 中的拉取请求 (pull requests) 和协作功能。Copilot 编码代理运行在远程基础设施上，非常适合不需要即时反馈、不需要本地运行或涉及通过 GitHub 进行协作的任务。

1. 首先，将项目发布到 GitHub 存储库，并将其添加为远程，以便在您的项目上使用 Copilot 编码代理。

   1. 从命令面板（⇧⌘P (Windows、Linux Ctrl+Shift+P)）运行 **发布到 GitHub** 命令，并按照提示创建一个新的存储库。

   2. 从命令面板运行 **Git: Add Remote** 命令，并按照提示将您的 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 on my Behalf** 视图的拉取请求进度。

6. 完成后，云代理会将拉取请求分配给您进行审查。

   

7. 右键单击“**会话**”视图中的云代理会话以查看其他选项，或选择会话并选择 **检出** 或 **应用**。

您已成功使用云代理通过 GitHub 协作开发功能。云代理使您能够利用远程资源，并通过 GitHub 问题和拉取请求进行协作。

后续步骤

您已成功使用不同类型的代理构建、增强和重新设计了待办事项应用程序。继续探索代理

• 了解代理类型及其使用场景
• 探索 创建自定义代理