Visual Studio Code 中 GitHub Copilot 入门

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

提示

如果您还没有 Copilot 订阅，您可以注册 Copilot Free 计划，免费使用 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 的聊天对话，以使用自然语言询问有关您的代码的特定任务。

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

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

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

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

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

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

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

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

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

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

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

从命令中心 Copilot 菜单打开聊天视图，或按 ⌃⌘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 Edits 可以修改的文件。如果文件未添加，请使用 *添加文件... 将文件添加到工作集。
在聊天输入字段中输入返回一个静态 html 页面作为主页并实现它。，然后按 Enter 启动新的编辑会话。

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

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

除了内联完成和聊天对话之外，GitHub Copilot 还可以在 VS Code 中的不同位置和整个开发流程中使用。您可能会注意到 Copilot 功能通过 VS Code 用户界面中的闪光图标出现。

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

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

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

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