现已推出！了解 11 月份的新功能和修复。

在 VS Code 中开始使用 Copilot Chat

本教程将引导您了解如何在 Visual Studio Code 中使用 GitHub Copilot Chat 扩展。您可以使用 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 中设置 GitHub Copilot，方法是注册订阅并在 VS Code 中安装 Copilot 扩展。

开始您的第一个 Copilot chat 对话

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

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

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

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

    提示

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

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

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

    • @workspace 是一个聊天参与者，即可以执行任务或回答特定领域问题的领域专家。在这种情况下，@workspace 了解 VS Code 工作区和您的代码库。

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

  3. Copilot 返回一个文件树，表示新的工作区文件，以及一个用于创建工作区的按钮。

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

    您可以选择文件树中的任何文件，以在实际创建之前预览内容。如果您对生成的文件不满意，或者想要其他内容，您可以提出后续问题，例如 @workspace use ejs 以使用 EJS 而不是 Pug。

  4. 选择创建工作区以创建新的工作区，然后在磁盘上选择应创建工作区的文件夹。

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

    Screenshot of VS Code, showing the newly created workspace for an Express app.

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

使用聊天参与者

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

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

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

    Screenshot of VS Code Copilot Chat view, showing the results for added a page.

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

  2. 或者，您可以按照说明向您的应用程序添加新页面。

    提示

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

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

    Screenshot of VS Code Copilot Chat view, showing the list of chat participants.

    注意

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

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

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

    Screenshot of VS Code Copilot Chat view, showing results and a button to open the Command Palette in VS Code.

通过内联聊天保持流畅

虽然“聊天”视图非常适合与 Copilot 进行持续对话，但对于特定场景，直接从编辑器访问聊天可能更有效。例如，当您查看代码更改、编写单元测试或重构代码时。

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

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

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

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

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

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

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

  3. 在聊天输入字段中输入 make configurable，然后按 Enter。

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

    Screenshot of VS Code editor with the suggested code change.

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

    Screenshot of VS Code Inline Chat, highlighting the 'More Actions' control and diff editor.

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

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

    提示

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

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

使用智能操作

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

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

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

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

    Screenshot of VS Code, highlighting the sparkle and Copilot smart actions context menu.

  3. Copilot 内联聊天会弹出，其中预先填充了错误消息以及解决问题的建议。

    Screenshot of VS Code Inline Chat, showing the result of the fix smart action.

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

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

Screenshot of VS Code Copilot smart action context menu.

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

添加聊天上下文

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

让我们向 Copilot 询问工作区中特定文件的用途是什么。

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

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

    Screenshot of VS Code Copilot Chat view, showing the Attach context button and context Quick Pick.

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

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

    Screenshot of VS Code context Quick Pick, highlighting the selected' index.ts' file.

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

  4. 现在在聊天输入字段中输入以下提示： @workspace 这是做什么的。 然后，按 Enter 发送请求。

    Screenshot of VS Code Copilot Chat view, showing the chat prompt with the attached file context.

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

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

    提示

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

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

恭喜

恭喜，您已成功使用 GitHub Copilot Chat 扩展程序进行 AI 支持的对话，以帮助您重构代码、修复问题或提高代码理解能力。

其他资源

12/11/2024