在 VS Code 中试用

VS Code 中 Copilot Chat 入门

本教程将引导你如何在 Visual Studio Code 中使用 Copilot Chat。你可以使用 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 扩展。

开始首次聊天对话

Copilot Chat 允许你使用自然语言与 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. 在聊天视图中,从聊天模式下拉菜单中选择提问

    使用提问模式向 Copilot 询问有关编码和技术主题的问题、解释代码或集思广益。

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

  4. 让我们向 Copilot 询问流行的 Web 框架。在聊天输入字段中输入“最流行的 Web 框架有哪些?”

    Copilot 返回一个流行的 Web 框架列表。尝试提出后续问题以获取有关特定框架的更多信息,或比较框架。例如,你可以问“Express 和 Fastify 有什么区别?”或“如何进行服务器端渲染?”。

  5. 要搭建新的 Web 应用,请在聊天输入字段中输入“使用 TypeScript 和 Pug 的新 Express 应用”。

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

    Screenshot of VS Code Copilot 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. 在聊天输入字段中输入“添加对 JSON 输出的支持”并按 Enter

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

    Screenshot of VS Code editor with the suggested code change.

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

    如果你对建议的代码更改不满意,可以选择重新运行请求控件或提出后续问题以获取其他建议。

提示

在编辑器中右键单击并选择Copilot上下文菜单以访问常用的 Copilot 命令,例如修复或解释代码或生成测试。

跨多个文件进行编辑

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

让我们使用编辑模式,使用 .env 文件来存储 Web 应用的配置。

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

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

  2. 为了帮助 Copilot 理解你请求的范围,让我们将 package.jsonapp.ts 作为上下文添加到提示中。

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

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

  3. 在聊天输入字段中输入“使用 .env 文件进行配置”并按 Enter

  4. 请注意 Copilot 如何在多个文件之间进行更新,并向你的工作区添加一个新的 .env 文件。

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

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

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

    使用编辑器中的覆盖控件可以轻松导航和查看文件中单个更改。

开始智能代理编码工作流

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

让我们使用代理模式,将 Web 应用用于分享旅行技巧并添加测试。

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

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

  2. 在聊天输入字段中输入“将应用设为旅行博客。添加测试以避免代码回归。”并按 Enter

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

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

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

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

  4. Copilot 完成任务后,请查看更改并测试应用。

    你还可以通过提供诸如“运行应用”或“启动服务器”之类的提示,要求 Copilot 运行应用。

恭喜

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

其他资源