教程:在 VS Code 中使用智能体

本教程将引导你在 Visual Studio Code 中使用不同类型的智能体。你将从头构建一个待办事项应用,添加主题切换功能,并通过将工作分派给本地、计划、后台和云端智能体来重新设计布局。

提示

如果您还没有 Copilot 订阅,您可以通过注册 Copilot 免费计划来免费使用 Copilot,并获得每月的内联建议和 AI 配额。

前提条件

要完成本教程,你需要:

第一步:使用本地智能体构建应用骨架

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

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

    mkdir todo-app
    cd todo-app
    git init
    
  2. 在 VS Code 中打开项目文件夹。

  3. 打开聊天(Chat)视图(⌃⌘I(Windows、Linux Ctrl+Alt+I),然后从“智能体”下拉菜单中选择 Agent

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

    重要事项

    如果你看不到智能体选项,请确保在 VS Code 设置中启用了智能体( chat.agent.enabled 在 VS Code 中打开 在 VS Code Insiders 中打开 此设置可由你的组织管理。请联系管理员进行更改。)。你的组织也可能禁用了智能体——请联系管理员以启用此功能。

  4. 在聊天输入框中输入以下提示词来构建待办事项应用骨架,然后选择 Send(发送)。

    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. 打开 index.html 文件并选择 Preview(预览)按钮,以在集成浏览器中查看应用。

    Screenshot showing the Preview button in the top right corner of the editor when an HTML file is open.

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

    例如,你可以问:

    Mark todos as completed with a strikethrough effect.
    

现在你拥有了一个可正常运行的待办事项应用,你可以为其添加更多功能。通过使用本地智能体,你可以实时交互式地生成和完善代码。

第二步:使用 Copilot CLI 实现功能计划

在这一步中,你将使用计划智能体(plan agent)为主题切换功能创建实现计划,然后将实现工作在后台交接给 Copilot CLI。Copilot CLI 非常适合分派不需要立即交互的任务。它们可以使用 Git 工作树(worktree)将文件更改与你的主工作区隔离开来,并防止冲突。

  1. 首先,在源代码管理视图中提交当前的更改,以保持干净的状态。

  2. 在聊天视图中,选择 New Chat (+) > New Chat 来启动一个新的本地智能体会话。请注意,你之前的聊天会话会保留在会话列表中。

  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 > Continue in Copilot CLI 将计划交接给 Copilot CLI。

    Screenshot showing the Start Implementation button in the Chat view.

  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 会话,而不会中断你的主要工作流。

第三步:使用云端智能体协作开发功能

在这一步中,你将使用云端智能体(Copilot cloud agent)重新设计应用布局,并使用 GitHub 中的拉取请求和协作功能。Copilot cloud agent 运行在远程基础设施上,非常适合不需要即时反馈、无需在本地运行或涉及通过 GitHub 进行协作的任务。

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

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

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

  2. 在聊天视图中,选择 New Chat (+) > New Chat

  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 Pull Requests 视图的 Copilot on my Behalf(代表我的 Copilot)视图中跟踪拉取请求的进度。

  6. 完成后,云端智能体会将拉取请求指派给你进行审查。

    Screenshot showing the cloud agent session details, with the file change details.

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

你已成功使用云端智能体通过 GitHub 协作开发功能。云端智能体使你能够利用远程资源,并通过 GitHub Issues 和拉取请求就更改进行协作。

下一步计划

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

English 한국어 中文(简体) 中文(繁體)
© . This website operates independently and is not affiliated with or endorsed by Microsoft. All brand names, logos, and trademarks are the property of their respective owners.