Visual Studio Code

在VS Code中开始使用Copilot Chat

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

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

Tip

如果您还没有Copilot订阅，您可以通过注册Copilot免费计划免费使用Copilot，并获得每月一定数量的完成和聊天互动限制。

先决条件

  • 要在VS Code中使用GitHub Copilot，您必须安装GitHub Copilot扩展。当您安装此扩展时，GitHub Copilot Chat扩展也会被安装。

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

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

获取您的第一个Copilot聊天对话

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

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

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

    VS Code编辑器的截图，显示Copilot聊天视图，突出显示命令中心中的聊天菜单。

    Tip

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

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

    注意这个聊天提示是如何结构化的，以向Copilot提供清晰简洁的指令。让我们来分解一下：

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

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

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

    VS Code Copilot 聊天视图的截图，显示了一个新工作区的文件树和一个'创建工作区'按钮。

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

  4. 选择创建工作区以创建一个新的工作区，并选择磁盘上应创建该工作区的文件夹。

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

    VS Code的截图，显示为新创建的Express应用程序工作区。

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

使用聊天参与者

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

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

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

    VS Code Copilot 聊天视图的截图，显示了添加页面的结果。

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

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

    Tip

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

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

    VS Code Copilot 聊天视图的截图，显示聊天参与者列表。

    Note

    扩展还可以贡献聊天参与者，因此列表可能会根据您在VS Code中安装的扩展而有所不同。

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

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

    VS Code Copilot 聊天视图的截图，显示结果和一个在 VS Code 中打开命令面板的按钮。

通过内联聊天保持流畅

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

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

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

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

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

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

    VS Code 编辑器截图，突出显示内联聊天弹出控件。

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

  3. 在聊天输入框中输入make configurable并按Enter。

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

    VS Code 编辑器中显示建议代码更改的截图。

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

    VS Code 内联聊天截图，突出显示'更多操作'控件和差异编辑器。

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

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

    Tip

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

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

使用智能操作

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

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

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

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

    VS Code的截图，突出显示了sparkle和Copilot智能操作上下文菜单。

  3. Copilot 内联聊天出现，预填充了错误信息，并提供了解决问题的建议。

    VS Code 内联聊天截图，显示修复智能操作的结果。

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

除了Fix，Copilot还提供了更多智能代码操作，例如Explain (/explain)、Generate Docs (/doc)和Generate Tests (/tests)。您可以通过编辑器上下文菜单访问这些操作，然后选择Copilot。

VS Code Copilot 智能操作上下文菜单的截图。

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

添加聊天上下文

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

让我们询问Copilot关于工作区中特定文件的目的是什么。

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

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

    VS Code Copilot 聊天视图的截图，显示附加上下文按钮和上下文快速选择。

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

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

    VS Code 上下文快速选择截图，突出显示选中的 'index.ts' 文件。

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

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

    VS Code Copilot 聊天视图的截图，显示带有附加文件上下文的聊天提示。

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

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

    Tip

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

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

恭喜

恭喜你，你成功使用了GitHub Copilot Chat扩展，通过AI驱动的对话来帮助重构你的代码、解决问题或提高你对代码的理解。

额外资源

12/11/2024