🚀 在 VS Code 中！

Visual Studio Code 中 Copilot Chat 入门

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

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

提示

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

先决条件

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

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

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

开始您的第一次 Copilot chat 对话

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

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

  1. 从命令中心 chat 菜单打开 Chat 视图，或按 ⌃⌘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. 在 chat 输入字段中输入“@workspace /new express with typescript and pug”，然后按 Enter 发送请求。

    请注意此 chat 提示的结构如何提供清晰简洁的 Copilot 指令。让我们分解一下

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

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

  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 将重新加载新的工作区。

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

使用 chat 参与者

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

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

  1. 在 Chat 视图中，输入“@workspace 如何添加新页面？”

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

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

  2. （可选）按照说明将新页面添加到您的应用程序。

    提示

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

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

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

    注意

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

  4. 让我们使用 @vscode 来设置调试。在 chat 输入字段中输入“@vscode /startDebugging”。

    您将获得有关如何在 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.

使用内联 Chat 保持流畅

虽然 Chat 视图非常适合与 Copilot 进行持续对话，但在某些特定情况下，直接从编辑器访问 chat 可能会更有效率。例如，当您查看代码更改、编写单元测试或重构代码时。

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

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

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

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

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

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

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

  3. 在 chat 输入字段中输入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 内联 Chat 来帮助您进行代码重构！

使用智能操作

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

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

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

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

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

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

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

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

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

Screenshot of VS Code Copilot smart action context menu.

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

添加 chat 上下文

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

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

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

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

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

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

  3. 在上下文快速选择中，开始键入 index.ts，然后选择 src\types\index.ts 文件。

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

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

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

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

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

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

    提示

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

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

恭喜

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

其他资源

03/05/2025