教程：在 VS Code 中使用智能体 (Agents)

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

先决条件

完成本教程，您需要：

• 电脑上已安装 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. 打开聊天视图（⌃⌘I (Windows, Linux Ctrl+Alt+I)），并在智能体下拉菜单中选择 **Agent**。

   （可选）如果您有偏好，可以选择特定的语言模型。

   重要

   如果您没有看到智能体选项，请确保在 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. 查看智能体为应用生成的不同文件。根据需要使用 **保留 (Keep)** 或 **撤销 (Undo)** 来接受或拒绝更改。

6. 您可以在集成浏览器中预览更改。

   • 通过配置 workbench.browser.openLocalhostLinks 在 VS Code 中打开 在 VS Code Insiders 中打开 来启用针对 localhost URL 的集成浏览器。

   • 打开 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. 首先，在源代码管理视图中提交当前更改，以保持一个整洁的状态。

2. 在聊天视图中，选择 **新建聊天 (+)** > **新建聊天** 以开始新的本地智能体对话。注意，您之前的对话会保留在对话列表中。

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)** > **在 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 的拉取请求和协作功能。Copilot 云端智能体在远程基础设施上运行，非常适合不需要即时反馈、无需在本地运行或涉及通过 GitHub 进行协作的任务。

1. 首先，将项目发布到 GitHub 仓库并添加为远程仓库，以便在项目中使用 Copilot 云端智能体。

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

   2. 从命令面板运行 **Git: 添加远程仓库** 命令，并按照提示将您的 GitHub 仓库添加为远程仓库。

2. 在聊天视图中，选择 **新建聊天 (+)** > **新建聊天**。

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 拉取请求视图的 **Copilot on my Behalf** 视图中跟踪拉取请求的进度。

6. 完成后，云端智能体会将该拉取请求分配给您进行审查。

   

7. 在 **会话 (Sessions)** 视图中右键点击云端智能体会话以查看更多选项，或选择该会话并选择 **检出 (Checkout)** 或 **应用 (Apply)**。

您已成功使用云端智能体通过 GitHub 进行功能协作。云端智能体使您能够利用远程资源，并通过 GitHub Issue 和拉取请求进行更改协作。

后续步骤

您已经成功使用了不同类型的智能体来构建、增强和重新设计待办事项应用。请继续探索智能体：

• 了解智能体类型及使用场景
• 使用计划智能体规划和研究任务
• 探索创建自定义智能体