Visual Studio Code 中 GitHub Copilot 入门

本教程将引导您了解 Visual Studio Code 中 GitHub Copilot 的主要功能。了解如何开始使用 GitHub Copilot 扩展，以在编辑器中获取 AI 驱动的代码建议，使用聊天对话来重构您的代码，并通过智能操作修复代码错误。

提示

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

虽然我们在本教程中使用 TypeScript，但请注意 Copilot 也接受过许多其他语言和各种框架的培训。

先决条件

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

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

要在 VS Code 中开始使用 GitHub Copilot，您无需执行任何特殊操作。当您在编辑器中键入代码时，Copilot 会在编辑器中自动为您提供代码建议，以帮助您更高效地编码。

打开 Visual Studio Code 并创建一个新的 JavaScript 文件 calculator.js。
在 JavaScript 文件中，开始键入以下代码
```
class Calculator
```
Copilot 会自动以灰色暗淡文本（幽灵文本）的形式建议我们 Calculator 类的方法。在我们的示例中，建议了 add 和 subtract 方法。您收到的确切建议可能会有所不同。
要接受建议，请按 Tab 键。

恭喜！您刚刚接受了您的第一个 AI 驱动的内联建议。随着您继续键入，Copilot 会相应地更新内联建议。
对于任何给定的输入，都可能有多个建议。在类中键入以下代码以添加 factorial 方法
```
factorial(n) {
```
将鼠标悬停在编辑器中的建议上，并注意有多个建议。

您可以使用箭头控件或键盘快捷键来显示下一个 (⌥] (Windows、Linux Alt+])) 或上一个 (⌥[ (Windows、Linux Alt+[)) 建议。

AI 驱动的代码补全可以帮助您生成样板代码或重复代码，让您保持在开发者流程中，并专注于更复杂的编码任务。

借助 Copilot Chat，您可以启动与 VS Code 中 Copilot 的聊天对话，通过使用自然语言来询问有关代码的特定任务。

让我们使用内联 Chat 来帮助生成一个基本的 Express Web 服务器。

首先，向您的工作区添加一个新的 TypeScript 文件 server.ts。
现在，按键盘上的 ⌘I (Windows、Linux Ctrl+I) 以调出 Copilot 内联 Chat。

Copilot 内联 Chat 为您提供了一个聊天界面，您可以在其中询问有关活动编辑器中代码的问题。
在聊天输入字段中键入“add a simple express web server”，然后按 Enter 将提示发送给 Copilot。

请注意，Copilot 在编辑器中返回流式响应。响应是简单的 Node.js Express Web 服务器的实现。
选择接受或按 ⌘Enter (Windows、Linux Ctrl+Enter) 以应用建议的代码更改。

恭喜！您已使用 Copilot Chat 通过聊天和自然语言生成代码。

您还可以使用内联 Chat 来重构或改进编辑器中的现有代码。

请注意，我们的 Web 服务器当前正在使用静态端口号 3000。让我们将其更改为使用环境变量作为端口号。

在编辑器中，选择 server.ts 文件中的 3000 端口号，然后按 ⌘I (Windows、Linux Ctrl+I) 以启动内联 Chat。
在聊天输入字段中键入“use an environment variable for the port number”，然后按 Enter 发送聊天请求或提示。

请注意 Copilot 如何更新现有代码以使用环境变量作为端口号。
选择接受或按 ⌘Enter (Windows、Linux Ctrl+Enter) 以应用建议的代码更改。
如果您对建议的更改不满意，您可以修改提示并要求 Copilot 提供不同的解决方案。

例如，您可以要求 Copilot 为端口号使用不同的环境变量名称。

当您在新代码库中工作或探索新的编程语言时，您可能会遇到更通用的编码问题。 Copilot Chat 允许您在侧边打开聊天对话，并跟踪您的问题历史记录。

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

提示
您可以随时从命令中心菜单访问不同的 Copilot 功能。
在聊天输入字段中键入“什么是递归？”，然后按 Enter 将请求发送给 Copilot。

请注意，聊天响应包含丰富的结果，包括文本和代码块。聊天响应中的代码块支持 IntelliSense，使您能够通过将鼠标悬停在方法和符号上来获取有关它们的信息，或转到它们的定义。
按照 Copilot Chat 教程中的步骤，了解您还可以如何使用 Copilot Chat 询问有关您的特定代码库的问题。

较大的代码更改可能涉及编辑多个文件。借助 Copilot Edits，您可以在编辑器中跨工作区中的多个文件获得 AI 驱动的建议。 Copilot Edits 不是应用单个代码块，而是在整个工作区中进行编辑。

让我们使用 Copilot Edits 在 Web 服务器响应中返回 HTML 文件的内容。

从命令中心 Copilot 菜单中选择打开 Copilot Edits，或按 ⇧⌘I (Windows Ctrl+Shift+I, Linux Ctrl+Shift+Alt+I)。
Copilot Edits 视图已打开。请注意，server.ts 文件已添加到提示中。

Copilot 会自动将活动编辑器添加到提示中。如果文件未添加，请使用添加文件...手动将文件添加到提示中。
在聊天输入字段中输入返回静态 HTML 页面作为主页并实现它。，然后按 Enter 以启动新的编辑会话。

请注意，Copilot Edits 进行了多次编辑：它更新了 server.ts 文件以返回静态 HTML 页面，并且还添加了一个新文件 index.html。
如果您对结果感到满意，请选择保留以应用所有建议的更改。

您还可以在不同的编辑文件之间导航，并使用编辑器叠加控件接受/拒绝它们。

除了内联补全和聊天对话之外，GitHub Copilot 还可以在 VS Code 的不同位置和整个开发者流程中使用。当由于编译器错误而出现红色波浪线时，您可能会注意到编辑器中 Copilot 功能通过闪烁图标的存在。

其中一个位置是编辑器中的 Copilot 代码操作，每当由于编译器错误而出现红色波浪线时。让我们看看 Copilot 如何帮助解决编码错误。

打开您之前在编辑器中创建的 server.ts TypeScript 文件。

请注意，import express from 'express'; 语句包含红色波浪线。如果您将光标放在红色波浪线上，您可以看到 Copilot 闪烁图标出现。
选择闪烁图标以查看 Copilot 代码操作，然后选择使用 Copilot 修复。
请注意，Copilot 内联 Chat 出现，其中预先填充了错误消息以及修复问题的解决方案。

您可以选择直接从聊天响应中选择插入到终端按钮，以将建议的命令复制到您的终端中。