教程：VS Code 中的智能体编码

在本教程中，您将学习如何使用 Visual Studio Code 中的 AI 智能体进行构建。智能体可以制定解决方案、创建和编辑多个文件、运行命令并自行修复错误，所有这些都只需一个自然语言提示词。您描述需求，智能体负责执行工作。

您将从“智能体”窗口开始，这是一个专为“智能体优先”工作流设计的界面。然后，您将切换到“聊天”视图，在这里智能体会在您编辑代码时为您提供辅助。在此过程中，您还将掌握 VS Code 的基础知识，例如打开工作区、使用集成浏览器以及使用源代码管理提交更改。

您将使用 HTML、CSS 和 JavaScript 构建一个简单的个人作品集页面。该页面是完全静态的，因此您无需安装任何运行时或构建工具即可跟随教程操作。

先决条件

• 在您的计算机上下载并安装 Visual Studio Code
• 在 VS Code 中设置 GitHub Copilot
• 在您的计算机上安装 Git

创建项目文件夹

智能体在文件夹（也称为工作区）的上下文中工作。首先，请为您的项目创建一个文件夹。您还不需要在 VS Code 中打开该文件夹。在下一步中，您将在“智能体”窗口中打开它，这让您无需为每个工作区打开单独的窗口即可进行多工作区协作。

1. 在您的计算机上，创建一个名为 myportfolio 的空文件夹。

2. 将该文件夹置于 Git 版本控制之下，以便您可以跟踪更改并选择智能体应用编辑的方式。

   在 myportfolio 文件夹中打开终端，然后运行以下命令

   git init
   

   提示

   您也可以稍后在 VS Code 的源代码管理视图中初始化仓库。在本教程接近尾声时，您将使用源代码管理来提交更改。

使用“智能体 (Agents)”窗口进行构建

“智能体”窗口是 VS Code 中的一个专用窗口，专为“智能体优先”工作流构建。它针对跨项目任务编排进行了优化，因此您可以启动智能体会话、观察它们工作，并在多个工作区之间切换，而无需为每个工作区打开单独的窗口。这与专注于单一工作区编码的编辑器窗口和“聊天”视图有所不同。

在这一部分，您将在“智能体”窗口中打开文件夹，并根据一个提示词构建您的作品集页面。

打开“智能体”窗口

1. 在 VS Code 中，选择标题栏中的在智能体中打开 (Open in Agents) 按钮。

   您也可以从 VS Code 欢迎页面打开“智能体”窗口，或在命令面板中运行 Chat: Open Agents Window 命令（⇧⌘P（Windows, Linux Ctrl+Shift+P））。

   

2. 如果系统提示您登录，请选择一种登录方式并继续。

   “智能体”窗口需要访问您的 GitHub Copilot 订阅才能运行智能体会话。如果您已经在 VS Code 中登录了 GitHub，则此处也会自动登录。

启动智能体会话

1. 选择左侧边栏顶部的新建 (New) 以启动新会话。

   侧边栏显示您的活动智能体会话列表，按工作区分组。在左下角，您可以访问智能体自定义设置，以根据您的编码习惯修改智能体的行为。

2. 在工作区下拉菜单中，选择您计算机上的 myportfolio 文件夹。

   

   如果系统提示您信任该文件夹，请选择是的，我信任作者。

   重要

   工作区信任 (Workspace Trust) 让您可以决定是否执行项目文件夹中的代码。当您从互联网下载代码时，应先检查以确保其运行安全。获取有关工作区信任的更多信息。

3. 选择 Copilot CLI 作为该会话的智能体。

   Copilot CLI 在您的本地机器上运行智能体。VS Code 会为您安装和配置 Copilot CLI，因此无需额外设置。

4. 请注意，隔离方式已初始化为文件夹 (Folder)，以便智能体直接对您的工作区应用更改。

   如果您已有包含提交记录的 Git 仓库，也可以选择让智能体在单独的 Git 工作树中工作，稍后再合并更改。

5. 在聊天输入框中输入以下提示词并按 Enter

   Create a personal portfolio page with HTML, CSS, and JavaScript in separate files. Include a header with my name and a short bio, a section for projects with cards, and a contact section. Use modern styling and add some sample content.
   

   智能体将规划工作、创建文件，并在出现问题时进行自我修正。它在运行命令前可能会请求批准。请审阅请求并批准以继续。

   

预览您的页面

当您采用“智能体优先”工作流时，您的注意力可能首先集中在任务成果而非代码上。您可以在不离开 VS Code 或设置单独开发服务器的情况下，在集成浏览器中预览智能体的工作结果。

1. 在集成浏览器中预览页面。

   在更改 (Changes) 面板中，选择文件 (Files) 选项卡以查看工作区的文件资源管理器。右键单击 index.html 文件，然后选择在集成浏览器中打开 (Open in Integrated Browser)。

   集成浏览器会在 VS Code 内打开您的作品集页面，因此您无需外部浏览器或单独的开发服务器。获取有关集成浏览器的更多信息。

迭代设计

若要迭代设计，直接指向页面上的某个元素通常比用文字描述更方便。集成浏览器内置了一个工具，允许您选择页面上的元素并将其作为上下文添加到提示词中发送给智能体。

1. 在集成浏览器工具栏中，选择将元素添加到聊天 (Add Element to Chat) 按钮以进入选择模式。

2. 选择页面上的一个元素，例如带有您名字的标题或按钮。

   智能体会将所选元素作为上下文添加到您的提示词中，包括其 HTML 和 CSS 代码。

3. 关闭浏览器，输入描述您所需更改的提示词，然后按 Enter。例如

   Make this heading larger and use a gradient color for the text.
   

   智能体会更新文件以应用您的更改。打开集成浏览器查看更新后的页面。

审阅并提交更改

在提交智能体的工作之前，请先审阅更改内容。更改面板列出了智能体创建或修改的每个文件，以便您确认结果符合您的预期。

1. 在更改面板中，选择更改选项卡以查看智能体添加或修改的文件列表。

2. 选择一个文件以打开差异视图 (diff view) 并审阅智能体的编辑。您可以使用导航控件在不同文件之间切换。

   差异视图并排显示更改，并高亮显示添加和删除的行。在本例中，仅添加了新文件。

1. 在更改面板中选择提交更改 (Commit Changes)，将智能体的更改保存到您的 Git 仓库中。智能体会根据更改内容自动生成提交信息。

在编辑器中使用智能体编写代码

对于某些更改，您可能更倾向于“代码优先”的方法，即将重点放在编写代码上，而智能体在过程中为您提供辅助。例如，您可能想要添加主题切换器并在过程中微调样式。对于这种方法，请切换到编辑器并使用“聊天”视图。

为您的工作区打开编辑器

1. 在“智能体”窗口中，选择标题栏中的在编辑器中打开 (Open in Editor) 按钮，以在编辑器中打开当前活动的工作区。

2. 请注意，左侧边栏显示的是资源管理器 (Explorer) 视图，它显示了您工作区中的文件。选择一个文件即可在主区域的编辑器选项卡中打开它。

   您可以使用“资源管理器”视图来查看和管理工作区中的文件和文件夹。您可以打开任意数量的编辑器，并排查看它们。

3. 右侧边栏显示的是聊天视图，它展示了您的会话列表并允许您开始或继续对话。

在“聊天”视图中添加功能

1. 选择新建聊天 (New Chat) (+) 以启动新会话。

2. 在智能体目标 (Agent Target) 下拉菜单中选择本地 (Local)，以便在编辑器的上下文中运行智能体。它将直接操作您的工作区文件。

   本地智能体在 VS Code 中运行，并有权使用与编辑器集成的额外工具。例如，它可以读取文件中的 Linting 和编译器错误来修复问题，或直接启动集成浏览器来预览您的页面。

3. 在聊天输入框中输入以下提示词并按 Enter

   Add a theme switcher button that toggles between a light and dark color theme for the page.
   

   智能体会将更改应用到您的文件。

4. 直接在编辑器中审阅更改。

   打开已更改的文件，以行内差异形式查看智能体的编辑。使用覆盖控件来保留 (Keep) 或撤销 (Undo) 单个编辑。

5. 要求智能体在集成浏览器中预览您的页面，以查看新功能的实际效果。输入以下提示词以预览页面

   Preview the page in the integrated browser.
   

后续步骤

恭喜！您已经通过智能体构建了一个作品集页面，并在“智能体”窗口和“聊天”视图中进行了操作。若要进一步深入了解 Visual Studio Code 中的智能体编码，请获取有关如何执行以下操作的更多信息

• 探索不同的智能体类型并移交任务

• 详细了解“智能体”窗口

• 详细了解“聊天”视图