尝试以扩展 VS Code 中的代理模式！

在 VS Code 中开始使用聊天功能

本教程将引导您在 Visual Studio Code 中使用聊天功能。您可以使用由 AI 驱动的聊天对话来帮助重构代码、增进对代码的理解以及找到配置 VS Code 的方法。

如果您是首次在 VS Code 中使用 Copilot，请参阅 Copilot 概述，或在 Copilot 快速入门中进行设置并了解其主要功能。

提示

如果您还没有 Copilot 订阅，可以通过注册 Copilot 免费计划来免费使用 Copilot，并获得每月的代码补全和聊天交互限制。

先决条件

要在 VS Code 中使用 GitHub Copilot，您需要具备以下条件：

  • GitHub Copilot 的访问权限
  • 在 VS Code 中安装了 GitHub Copilot 扩展

请按照 GitHub Copilot 设置指南中的步骤获取 GitHub Copilot 的访问权限，并在 VS Code 中安装 Copilot 扩展。

进行您的首次聊天对话

聊天功能让您可以通过自然语言与 GitHub Copilot 互动，以询问和接收与编码相关问题的答案。

在本教程中，您将创建一个简单的 Node.js Web 应用程序。

  1. 打开一个新的 VS Code 窗口。您将在接下来的步骤中创建一个新的工作区。

  2. 从标题栏的 Copilot 菜单中选择打开聊天，或使用键盘快捷键 ⌃⌘I (Windows, Linux Ctrl+Alt+I)。

    Screenshot of VS Code editor, showing the Copilot Chat view, highlighting the chat menu in the Command Center.

    请注意，聊天视图在“辅助侧边栏”中打开。将聊天视图放在侧边，可以让您在处理代码时保持对话的持续进行。

  3. 在聊天视图中，从聊天模式下拉菜单中选择询问 (Ask)。

    使用询问模式可以提问有关编码和技术主题的问题、解释代码或进行头脑风暴。

    Screenshot of VS Code Chat view, showing the Ask mode dropdown.

  4. 让我们来问一下流行的 Web 框架。在聊天输入框中输入“what are the most popular web frameworks?”。

    VS Code 会返回一个流行 Web 框架的列表。您可以尝试提出后续问题，以获取有关特定框架的更多信息，或比较不同框架。例如，您可以问“what are the differences between Express and Fastify?”或“how to do server-side rendering?”。

  5. 要搭建一个新的 Web 应用程序，请在聊天输入框中输入“new express app with typescript and pug”。

    请注意 VS Code 如何返回一个表示新工作区文件的文件树。选择文件树中的任何文件以预览其内容。

    Screenshot of Chat view, showing a file tree for a new workspace and a 'Create Workspace' button.

  6. 选择创建工作区以创建应用程序，并在磁盘上选择一个文件夹来创建工作区。

    在对话框中选择打开，以在 VS Code 中打开新创建的工作区。

    注意

    VS Code 可能会询问您是否信任新的工作区。选择是，我信任内容以信任该工作区。获取有关工作区信任的更多详情。

通过内联聊天保持心流状态

虽然聊天视图非常适合保持对话的持续进行，但编辑器内联聊天则针对您希望向 Copilot 询问编辑器中正在处理的代码的情况进行了优化。例如，重构某段特定代码或解释一个复杂的算法。

我们来看看如何使用编辑器内联聊天进行代码重构。

  1. 打开 app.ts 文件，并使用键盘快捷键 ⌘I (Windows, Linux Ctrl+I) 调出编辑器内联聊天。或者，从标题栏的 Copilot 菜单中选择编辑器内联聊天。

    一个聊天输入框会内联显示在编辑器中，您可以在此输入聊天提示，并向 Copilot 询问有关编辑器中代码的问题。

    Screenshot of VS Code editor, highlighting the Inline Chat popup control.

  2. 在聊天输入框中输入“Add support for JSON output”，然后按 Enter。

    请注意 Copilot 如何提供代码建议，以在 Express 中添加对 JSON 输出的支持。

    Screenshot of VS Code editor with the suggested code change.

  3. 选择接受或关闭以应用或忽略更改。

    如果您对建议的代码更改不满意，可以选择重新运行请求控件或提出后续问题以获得另一个建议。

提示

在编辑器中右键单击可以访问常用的 AI 命令，例如修复或解释代码，或生成测试。

跨多个文件进行编辑

通过内联聊天，您对单个文件进行了更改。您还可以通过在聊天视图中切换到编辑模式，使用 Copilot 在工作区中跨多个文件进行更改。

让我们使用编辑模式，通过一个 .env 文件来存储您的 Web 应用程序的配置。

  1. 打开聊天视图，并从聊天模式下拉菜单中选择编辑 (Edit)。

    Screenshot of VS Code Copilot Chat view, showing the Edit mode dropdown.

  2. 为了帮助 Copilot 理解您的请求范围，让我们将 package.json 和 app.ts 作为上下文添加到提示中。

    1. 在聊天视图中选择添加上下文，在搜索框中输入 package，然后从文件列表中选择 package.json 文件。请注意，您可以添加多种类型的上下文。

    2. 在编辑器中打开 app.ts 文件，请注意 Copilot 会自动将活动文件添加到聊天上下文中。

  3. 在聊天输入框中输入“Use a .env file for configuration”，然后按 Enter。

  4. 请注意 Copilot 如何跨多个文件进行更新，并向您的工作区添加一个新的 .env 文件。

    聊天视图会以粗体文本显示已更改的文件。

    Screenshot of VS Code editor, showing the suggested code change in the app.ts file.

  5. 在聊天视图中选择保留以确认所有建议的更改。

    使用编辑器中的悬浮控件，可以轻松地在文件中导航和审查各个更改。

启动代理式编码流程

对于更复杂的请求，您可以使用代理模式，让 Copilot 自主地规划和执行完成您请求所需的任务。这些任务可能涉及编辑代码，也可能包括在终端中运行命令。在代理模式下，Copilot 可能会调用不同的工具来完成任务。

让我们使用代理模式将 Web 应用程序改为分享旅行攻略并添加测试。

  1. 打开聊天视图，并从聊天模式下拉菜单中选择代理 (Agent)。

    Screenshot of VS Code Copilot Chat view, showing the Agent mode dropdown.

  2. 在聊天输入框中输入“Make the app a travel blog. Add tests to avoid code regression.”，然后按 Enter。

    请注意，您不需要向提示中添加上下文。代理模式会自动分析您工作区中的代码。

  3. Copilot 会迭代应用代码更改并运行命令，例如运行测试。通过在聊天视图中选择继续来确认终端命令。

    Screenshot of VS Code editor, showing the Chat view asking to confirm running tests in the terminal.

    根据您请求的复杂程度，Copilot 可能需要几分钟才能完成所有任务。如果在此过程中遇到问题，它会迭代修复它们。

  4. 一旦 Copilot 完成任务，请审查更改并测试应用程序。

    您也可以通过给出类似“Run the app”或“Start the server”的提示来要求 Copilot 运行应用程序。

恭喜

恭喜您，您已成功在 VS Code 中使用 Copilot Chat 来提问问题并跨工作区进行代码编辑。继续尝试不同的提示和聊天模式，以充分利用 Copilot Chat。

其他资源

08/07/2025