VS Code 中的 Copilot Chat 入门

本教程将引导您在 Visual Studio Code 中使用 Copilot Chat。您将使用 AI 驱动的聊天对话来帮助重构代码、提高代码理解能力以及了解如何配置 VS Code。

如果您是 VS Code 中 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)。

   

   请注意，聊天视图会在第二侧边栏中打开。将聊天视图放在侧边可以帮助您在处理代码时继续进行对话。

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

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

   

4. 让我们向 Copilot 询问流行的 Web 框架。在聊天输入字段中输入“what are the most popular web frameworks?”（最流行的 Web 框架有哪些？）。

   Copilot 返回一个流行的 Web 框架列表。尝试提出后续问题以获取有关特定框架的更多信息，或比较框架。例如，您可以问“what are the differences between Express and Fastify?”（Express 和 Fastify 之间有什么区别？）或“how to do server-side rendering?”（如何进行服务器端渲染？）。

5. 要搭建一个新的 Web 应用，请在聊天输入字段中输入“new express app with typescript and pug”（创建使用 typescript 和 pug 的新 express 应用）。

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

   

6. 选择创建工作区来创建应用，并选择磁盘上的文件夹来创建工作区。

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

   注意

   VS Code 可能会询问您是否信任新工作区。选择是，我信任内容以信任工作区。了解更多关于工作区信任的详细信息。

通过行内聊天保持流畅

虽然聊天视图非常适合保持对话流畅，但编辑器行内聊天经过优化，适用于需要向 Copilot 询问编辑器中正在积极处理的代码的情况。例如，重构特定代码或解释复杂算法。

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

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

   一个聊天输入字段会以内联方式出现在编辑器中，您可以在其中输入您的聊天提示并向 Copilot 询问编辑器中的代码。

   

2. 在聊天输入字段中输入“Add support for JSON output”（添加对 JSON 输出的支持），然后按 Enter。

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

   

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

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

跨多个文件进行编辑

使用行内聊天，您更改了单个文件。您也可以在聊天视图中切换到编辑模式，使用 Copilot 更改工作区中的多个文件。

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

1. 打开聊天视图，从聊天模式下拉列表中选择编辑。

   

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

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

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

3. 在聊天输入字段中输入“Use a .env file for configuration”（使用 .env 文件进行配置），然后按 Enter。

4. 注意 Copilot 如何跨多个文件进行更新并在工作区中添加新的 .env 文件。

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

   

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

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

开始 Agent 编码流程

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

让我们使用 Agent 模式将 Web 应用更改为关于分享旅行技巧的应用并添加测试。

1. 打开聊天视图，从聊天模式下拉列表中选择Agent。

   

2. 在聊天输入字段中输入“Make the app a travel blog. Add tests to avoid code regression.”（将应用改为旅行博客。添加测试以避免代码回归。），然后按 Enter。

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

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

   

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

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

   您也可以要求 Copilot 运行应用，例如给出“Run the app”（运行应用）或“Start the server”（启动服务器）等提示。

恭喜

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

其他资源

• 获取 VS Code 中 Copilot Chat 的概述
• 使用聊天提问关于代码的问题
• 开始多文件编码会话
• 开始 Agent 编码工作流