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

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

先决条件

完成本教程需要准备：

• 电脑上已安装 Visual Studio Code
• 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. 您可以在内置浏览器中预览更改。

   • 通过配置以下设置，为 localhost URL 启用内置浏览器： workbench.browser.openLocalhostLinks 在 VS Code 中打开 在 VS Code Insiders 中打开

   • 打开 index.html 文件并点击 预览 (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 中继续 (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 的拉取请求 (PR) 和协作功能。Copilot 编码智能体运行在远程基础设施上，非常适合不需要立即反馈、无需在本地运行或涉及通过 GitHub 进行协作的任务。

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

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

   2. 从命令面板运行 Git: 添加远程 (Git: Add Remote) 命令，并按照提示将您的 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 和拉取请求协作处理更改。

后续步骤

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

• 了解 智能体类型及使用时机
• 使用规划智能体进行任务规划与研究
• 探索 创建自定义智能体