本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

教程:在 VS Code 中使用代理

本教程将引导您使用Visual Studio Code中的不同类型的代理。您将从头开始构建一个待办事项应用程序,添加主题切换功能,并通过委托本地、计划、背景和云代理来重新设计布局。

小贴士

如果你还没有 Copilot 订阅,你可以通过注册 Copilot 免费计划 来免费使用 Copilot,并获得每月的内置建议和聊天互动的限制。

先决条件

要完成此教程,您需要:

步骤 1:使用本地代理来创建一个应用

在这一步骤中,您使用本地代理来创建初始的待办事项应用程序结构。本地代理非常适合需要即时反馈和结果的交互式任务,例如搭建新项目或迭代新功能。

  1. 创建一个新的项目文件夹,并确保它在Git版本控制下。

    创建目录 todo-app
    进入目录 todo-app
    git 初始化
    
  2. 在 VS Code 中打开项目文件夹。

  3. 打开聊天视图 (⌃⌘I (Windows, Linux Ctrl+Alt+I)) 并选择 Agent 从代理下拉菜单中。

    可选地,如果您有特定的偏好,可以选择一个特定的语言模型。

    重要

    如果你没有看到代理选项,请确保在 VS Code 设置中启用了代理 (

    聊天代理启用
    • 在 VS Code 中打开
    • 在 VS Code Insiders 中打开
    ORG)。您的组织可能也已禁用代理 - 请联系您的管理员启用此功能。

  4. 在聊天输入框中输入以下提示以生成待办事项应用程序并选择发送.

    使用HTML、CSS和JavaScript创建一个简单的待办事项应用。包括一个添加待办事项的输入字段、一个显示它们的列表以及每个项目的一个删除按钮。
    

  5. 在代理生成应用的不同文件时进行审查。使用保留撤销来根据需要接受或拒绝更改。

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

    • 启用集成浏览器本地主机通过配置URL

      工作台.浏览器.打开本地链接
      • 在 VS Code 中打开
      • 在 VS Code Insiders 中打开

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

  7. 发送额外的提示以进一步增强应用程序。请注意,预览会实时更新,当你进行更改时。

    例如,您可以问:

    将所有标记为已完成,并带有删除线效果。
    

你现在有一个可以扩展更多功能的待办事项应用。通过使用本地代理,你可以在实时互动中生成和优化你的代码。

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

在这一步骤中,您使用计划代理来创建一个主题切换的实施计划,然后将实施交给后台代理。后台代理非常适合委托不需要立即互动的任务。它们使用Git工作树将文件更改与您的主要工作区隔离,并防止冲突。

  1. 首先,将源控制视图中的当前更改提交,以确保状态干净。

  2. 在聊天视图中,选择新聊天 (+) > 新聊天以开始一个新的本地代理会话。请注意,您的以前聊天会话在会话列表中得以保留。

  3. 选择计划从代理下拉菜单中选择以切换到计划代理,并输入以下提示:

    创建一个计划,为应用程序添加一个深色/浅色主题切换按钮。该切换按钮应在用户之间切换主题,并保持用户的偏好。
    
  4. 计划代理可能会问一些澄清问题来完善计划。根据需要回应。

  5. 当您准备好了,请选择开始实施 > 在后台继续以将计划交给后台代理。

    截图显示聊天视图中的开始实施按钮。

  6. 后台代理在其中启动实现功能的Git工作区。您可以在会话视图中跟踪后台代理。选择会话以查看其进度的详细信息。

    小贴士

    当后台代理运行时,您可以继续编辑主工作区而不会发生冲突。

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

    小贴士

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

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

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

步骤 3:使用云代理合作开发一个功能

在这一步骤中,您使用云代理(Copilot 编码代理)重新设计应用程序布局,并使用 GitHub 中的拉取请求和协作功能。Copilot 编码代理运行在远程基础设施上,适用于不需要即时反馈、不需要在本地运行或涉及通过 GitHub 进行协作的任务。

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

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

    2. 运行 Git: 添加远程 命令,从命令面板中按照提示将你的 GitHub 仓库添加为远程仓库。

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

  3. 选择 从会话类型下拉菜单中切换到云代理,并输入以下提示:

    重新设计待办事项应用的布局以提升用户体验。更新颜色、间距、排版,并添加动画以使其具有现代外观。
    
  4. 云代理启动一个新会话来处理您的请求。它在您的 GitHub 仓库中创建一个分支和拉取请求。

  5. 您可以在聊天视图中的会话视图中跟踪云代理,或选择链接查看拉取请求的详细信息。

    小贴士

    如果你安装了 GitHub 拉取请求扩展,你还可以在 代我行事的 Copilot 视图中跟踪拉取请求的进展。

  6. 一旦完成,云代理将拉取请求分配给您进行审核。

    截图显示了云代理会话详细信息,包括文件更改详细信息。

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

您已成功使用云代理通过 GitHub 合作开发一个功能。云代理使您能够使用远程资源,并通过 GitHub 问题和拉取请求来协作更改。

下一步

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