教程：在 VS Code 中使用代理

本教程将带你了解如何在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代码设置中启用代理（

   chat.agent.enabled

   • 在VS代码中打开
   • 在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. 你可以在集成的浏览器中预览这些更改。

   • 启用集成浏览器本地主持通过配置URL来实现

     workbench.browser.openLocalhostLinks

     • 在VS代码中打开
     • 在VS Code Insiders中开放

   • 打开index.html文件并选择预览按钮。

7. 发送额外的提示以进一步提升应用功能。注意预览会随着你所做的更改实时更新。

   例如，你可以问：

   Mark todos as completed with a strikethrough effect.
   

你现在有一个可以扩展的待办事项应用，并添加更多功能。通过使用本地代理，你可以实时交互生成和完善代码。

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

在这一步中，你用计划代理为主题切换创建实施计划，然后将实现交给后台代理。后台代理非常适合委派不需要即时互动的任务。他们用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. 准备好后，选择“开始实施”>“在后台继续”，将计划交给后台代理。

   

6. 后台代理会创建一个 Git 工作树，开始实现该功能。你可以在会话视图中跟踪后台代理。选择会议以查看其进展详情。

   提示

   在后台代理正常工作时，你可以继续编辑主工作区，不会有冲突。

7. 后台代理完成后，选择任意修改文件以查看其更改，或选择“查看所有更改”打开包含所有更改的多文件差异编辑器。

   提示

   你可以向后台代理发送跟进提示，以便对该功能进行调整或改进。

8. 在聊天视图中，选择应用以将更改应用到主工作区。

你已经成功地用后台代理自主完成了一项任务。你可以为不同任务启动多个后台代理，而不打断你的主要工作流程。

步骤3：使用云代理协作开发功能

在这一步中，你使用云代理（Copilot coding agent）重新设计应用布局，并在 GitHub 中使用拉取请求和协作功能。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 Request扩展，也可以在我的代表视图中的Copilot Pull Request视图中跟踪拉取请求的进度。

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

   

7. 在会话视图中右键点击云代理会话查看更多选项，或选择会话后选择“结账”或“应用”。

你已经成功使用云代理与GitHub协作开发了一个功能。云代理让你能够使用远程资源，并通过GitHub问题和拉取请求协作处理变更。

下一步

你已经成功地使用了不同类型的代理来构建、增强和重新设计一个待办事项应用。继续探索代理：

• 了解代理类型及其使用时机
• 探索创建定制代理