在 VS Code 中开始使用 Copilot Chat

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

如果您是 VS Code 中 GitHub Copilot 的新手，请参阅 GitHub Copilot 概述 或按照 GitHub Copilot 入门教程 进行设置并了解关键功能。

先决条件

• 要在 VS Code 中使用 GitHub Copilot，您必须拥有 GitHub Copilot 扩展。安装此扩展后，GitHub Copilot Chat 扩展也将被安装。

• 要使用 GitHub Copilot，您必须在您的个人帐户中拥有有效的 GitHub Copilot 订阅，或者需要由您的组织分配一个席位。

按照以下步骤通过注册订阅并在 VS Code 中安装 Copilot 扩展来 在 VS Code 中设置 GitHub Copilot。

获得您的第一个 Copilot Chat 会话

Copilot Chat 是一种聊天界面，可让您与 GitHub Copilot 交互，以询问和接收与编码相关的问题的答案。聊天界面提供对编码信息和支持的访问，而无需您浏览文档或搜索在线论坛。

在本教程中，您将创建一个简单的 Node.js Web 应用程序。因此，让我们开始并要求 Copilot 告诉我们有关 Node.js 的 Web 框架的更多信息。

1. 从命令中心聊天菜单打开聊天视图，或按 ⌃⌘I (Windows、Linux Ctrl+Alt+I)。

   

   提示

   您可以随时从命令中心菜单访问不同的 Copilot 功能。

2. 在聊天输入字段中，输入 give a list of nodejs web server frameworks，然后按 Enter 将请求发送到 Copilot。

   Copilot 将返回一个 Web 框架列表以及一些其他信息。因此，您可以在 VS Code 中搜索编码信息。

   请注意，您的结果可能与屏幕截图中显示的结果不同。AI 模型是非确定性的，这意味着它们在被问到相同问题时可能会返回不同的答案。这可能是由于随着时间的推移学习和适应、语言差异、上下文变化（例如您的聊天历史记录）等等。

   

   注意，Copilot 还建议相关的后续问题，您可以选择它们直接提交给 Copilot。

   提示

   要获取有关 GitHub Copilot 以及如何与 Copilot Chat 交互的帮助，您可以在聊天输入字段中键入 /help。

3. 让我们获取有关 Express.js 的更多信息。在聊天输入字段中输入 how to get started with express。

   响应包含有关设置 Express.js 应用程序的分步说明，以及可能包含带有 shell 命令或实现代码的代码块。聊天响应中的代码块支持 IntelliSense，这使您能够通过将鼠标悬停在方法和符号上或转到它们的定义来获取有关它们的更多信息。

   

   当 Copilot 返回一个代码块时，您可以选择 在编辑器中应用 按钮，让 Copilot 在适当的位置为您将代码插入到活动编辑器中。或者，您也可以在光标位置插入代码，或将代码复制到剪贴板。

   

   当聊天响应包含指向文件的链接时，您可以将该文件从聊天视图拖放到编辑器中以打开它。

   提示

   尝试使用不同的问题，看看 Copilot 如何响应。例如，您可以要求仅提供代码示例（“给我 3 个创建 Express 应用程序的代码示例”），或者询问如何向 Express 应用程序添加基本身份验证（“如何创建具有基本身份验证的 Express 应用程序”），以及更多！

生成新的工作区

即使要创建一个简单的 Express.js 应用程序也需要创建多个文件：一个用于设置服务器的 JavaScript 文件、一个 package.json、HTML（模板）文件等等。与其要求 Copilot 生成每个单独的文件，不如指示它为您创建一个完整的工作区。

让我们要求 Copilot 为 Express.js 和 Pug 应用程序生成一个工作区。

1. 在聊天输入字段中输入 @workspace /new express with typescript and pug，然后按 Enter 发送请求。

   注意此聊天提示是如何构建的，以便向 Copilot 提供清晰简洁的说明。让我们分解一下

   • @workspace 是一种 聊天参与者，它们是领域专家，可以执行特定领域的某些任务或回答相关问题。在本例中，@workspace 了解 VS Code 工作区和您的代码库。

   • /new 是一个 斜杠命令，它告诉 @workspace 参与者您要创建一个新的工作区。斜杠命令是常用说明的简写。您可以在聊天输入中输入 / 符号以获取支持的命令列表。

2. Copilot 将返回一个文件树，它代表新的工作区文件，以及一个创建工作区的按钮。

   

   您可以在文件树中选择任何文件以预览其内容，然后再实际创建它。如果您对生成的

3. 选择 创建工作区 以创建一个新的工作区，然后选择一个磁盘上的文件夹以创建工作区。

   工作区创建完成后，VS Code 将重新加载新的工作区。

   

恭喜！您刚刚使用自然语言通过 Copilot Chat 创建了一个工作区。这种方法的优势在于，您可以根据需要调整您的请求。也许您更喜欢使用 Express.js 和 EJS，或者根本不使用 Express.js，而是使用带有 Bootstrap 的纯 Node.js。选择最适合您的选择！

使用聊天参与者

之前，您已经使用 @workspace 聊天参与者来生成新的工作区，但您也可以使用它来询问有关工作区中实际代码的问题。

让我们迭代我们生成的 Express 应用程序，并向其中添加一个新页面。

1. 在聊天视图中，输入 @workspace how to add a new page?

   

   Copilot 将返回特定于您的代码的添加新页面的分步说明。这是因为您在聊天提示中添加了 @workspace，它具有关于您特定工作区内容的上下文。如果您不包含 @workspace，您将获得更通用的说明。

2. 可选地，按照说明添加一个新页面到您的应用程序。

   提示

   您可以添加有关要添加的页面类型的更多详细信息，例如主页、联系页面或产品页面。

3. 您可以使用更多聊天参与者，每个参与者都有其自身的特定领域专业知识。 选择 图标或在聊天视图中键入 @ 来获取可用聊天参与者的列表。

   

   注意：扩展程序也可以贡献聊天参与者，因此列表可能会因您在 VS Code 中安装的扩展程序而异。

4. 让我们使用 @vscode 来询问有关 VS Code 的问题。 在聊天输入字段中输入 @vscode how to debug node.js app。

   您将获得有关如何在 VS Code 中调试 Node.js 应用程序的说明，还会获得一个按钮，可直接访问相应的 VS Code 功能。

   

使用内联聊天保持流畅工作

虽然聊天视图非常适合与 Copilot 保持对话，但在某些情况下，直接从编辑器访问聊天可能更有效。 例如，当您要审查代码更改、编写单元测试或重构代码时。

让我们看看如何使用聊天来进行代码重构。

1. 在编辑器中打开 app.ts 文件，并将光标放在设置端口号的行（const port = 3000）上。

   对于更复杂的代码更改，您可以选择一段代码，为 Copilot 提供更多有关您要更改内容的上下文。

2. 按键盘上的 ⌘I（Windows、Linux Ctrl+I） 来调出 Copilot 内联聊天，或者右键单击并选择Copilot > 在编辑器中启动。

   Copilot 内联聊天使您能够直接从编辑器向 Copilot 提问。

   

   现在让我们要求 Copilot 重构代码以使端口号可配置。

3. 在聊天输入字段中输入使可配置，然后按 Enter。

   请注意，Copilot 如何更新所选代码并建议从环境变量中读取端口号。

   

   您可以通过选择更多操作 > 切换更改来查看应用的更改。

   

4. 选择接受或放弃以应用或忽略更改。

   如果您对建议的代码更改不满意，可以选择重新运行请求按钮以获得另一个建议。

   提示

   使用点赞和踩按钮向 Copilot 提供有关建议的反馈。

恭喜您在编辑器中使用 Copilot 内联聊天来帮助您进行代码重构！

使用智能操作

在某些常见情况下，您可能需要直接调用 Copilot，而无需输入聊天提示。 例如，Copilot 可以帮助添加代码文档、生成单元测试或帮助您修复编码错误。

让我们看看如何使用智能操作来修复编码错误。

1. 打开 app.ts 文件，选择带红色波浪线的一个符号。

2. 选择闪光图标以查看 Copilot 代码操作，然后选择使用 Copilot 修复。

   

3. Copilot 内联聊天将出现，其中预填充了错误消息和一个解决问题的建议。

   

   请注意，Copilot 如何使用 /fix 斜杠命令，后跟错误消息。 您也可以直接在聊天输入字段中使用 /fix 命令来获得有关修复编码错误的帮助。

除了修复之外，Copilot 还提供了更多智能代码操作，例如解释（/explain）、生成文档（/doc）和生成测试（/tests）。 您可以通过编辑器上下文菜单访问这些操作，然后选择Copilot。

如果您遇到一些不清楚的代码块，只需选择它并使用 /explain 来让 Copilot 为您提供解释并帮助您提高代码理解能力。

添加聊天上下文

之前，您使用 @workspace 来询问有关工作区的问题。 如果您想向 Copilot 询问有关特定内容的问题，比如您代码中的特定文件或符号？ 您如何在不使用自然语言详细描述所有内容的情况下向 Copilot 提供该上下文？

让我们问问 Copilot 工作区中特定文件的用途。

1. 从命令中心聊天菜单打开聊天视图，或按 ⌃⌘I (Windows、Linux Ctrl+Alt+I)。

2. 选择聊天输入字段旁边的附加上下文按钮以打开上下文快速选择。

   

   在上下文快速选择中，您可以选择要添加到聊天提示的不同类型的上下文，例如来自工作区的文件、符号、当前选择等等。

3. 开始键入 index.ts 以查找相应的文件，然后选择 src\types\index.ts 文件。

   

   选择文件后，请注意该文件已添加到聊天视图中。 您可以选择将更多文件或其他上下文类型添加到聊天提示中。

4. 现在在聊天输入字段中输入以下提示：@workspace what does this do。 然后，按 Enter 发送请求。

   

   现在，Copilot 将返回有关所选文件中代码用途的解释。

5. 除了使用附加上下文控件之外，您还可以通过在聊天输入字段中键入 # 来直接引用不同类型的上下文。

   提示

   添加 #codebase 将您的整个工作区作为上下文添加到聊天提示中。 如果您想提出与项目不同领域相关的问题，这很有用。

6. 要快速将文件作为上下文附加到聊天提示，请将文件从资源管理器视图拖放到聊天视图中。 如果文件在编辑器中打开，您也可以将编辑器选项卡拖放到聊天视图中以附加文件。

恭喜

恭喜您成功使用 GitHub Copilot Chat 扩展来进行人工智能驱动的对话，以帮助您重构代码、修复问题或提高代码理解能力。

其他资源

• 获取有关 VS Code 中 Copilot Chat 的概述
• 使用 提示制作和上下文设置 优化您的 Copilot 体验