🚀 在 VS Code 中！

Visual Studio Code 中 Copilot Chat 入门

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

如果您是 Visual Studio Code 中 GitHub Copilot 的新手，请参阅 GitHub Copilot 概述，或在 GitHub Copilot 入门教程 中进行设置并发现关键功能。

提示

如果您还没有 Copilot 订阅，您可以注册 Copilot 免费计划 来免费使用 Copilot，并获得每月有限的补全和聊天互动次数。

先决条件

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

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

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

开始您的首次 Copilot 聊天对话

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 而使用纯 Node.js 与 Bootstrap。选择您最喜欢的！

使用聊天参与者

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

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

  1. 在聊天视图中，输入 @workspace 如何添加新页面？

    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 如何调试 node.js 应用程序。

    您将获得有关如何在 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 驱动的对话，以帮助重构您的代码、修复问题或提高您的代码理解能力。

其他资源

02/06/2025