在 VS Code 中开始使用 GitHub Copilot

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

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

有关您可以在 VS Code 中使用 GitHub Copilot 执行的操作的概述，请参阅 GitHub Copilot 概述。

先决条件

要在 VS Code 中使用 GitHub Copilot，您必须拥有 GitHub Copilot 扩展。安装此扩展后，GitHub Copilot 聊天扩展也会被安装。
要使用 GitHub Copilot，您必须拥有 GitHub Copilot 在您的个人帐户中的有效订阅，或者您需要由您的组织分配一个席位。

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

既然您已经注册了 Copilot 并激活了扩展，让我们看看它的帮助作用吧！

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

打开 Visual Studio Code 并创建一个新的 TypeScript 文件 Calculator.ts。
在 TypeScript 文件中，开始键入以下类定义。
```
class Calculator
```
Copilot 会自动以灰色调光文本（幽灵文本）的形式为我们的 Calculator 类建议一个方法。在本例中，建议使用 add 方法。确切的建议可能会有所不同。
要接受建议，请按 Tab 键。

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

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

AI 驱动的代码补全可以帮助您生成样板代码或重复性代码，让您保持开发流程，并将精力集中在更复杂的编码任务上。

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

让我们使用 Copilot 聊天来帮助我们生成一个简单的 Express Web 服务器。

首先，在您的工作区中添加一个新的 TypeScript 文件 server.ts。

让我们使用编辑器中的 Copilot 内联聊天来生成一个简单的 Express Web 服务器。
现在，在键盘上按 ⌘I (Windows、Linux Ctrl+I)，以调出 Copilot 内联聊天。

使用 Copilot 内联聊天，您可以获得一个聊天界面，让您通过使用自然语言询问有关代码的问题。
在聊天输入字段中键入 “添加一个简单的 Express Web 服务器”，然后按 Enter 将聊天请求或提示发送到 Copilot。

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

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

现在，让我们使用 Copilot 聊天来帮助我们重构代码，并在用户导航到主页时返回一个静态 HTML 文件。

在您处理现有代码库时，您通常需要重构或改进现有代码。您将使用 Copilot 聊天来重构和迭代您的代码。

让我们更新 / 路由以返回一个静态 HTML 页面。

在编辑器中，选择 app.get('/', req, res) 方法，然后按 ⌘I (Windows、Linux Ctrl+I) 以启动内联聊天。

通过在编辑器中选择一个文本范围，您可以为 Copilot 提供更多关于您请求的上下文信息。
在聊天输入字段中键入 “返回一个静态 index.html 文件”，然后按 Enter 将聊天请求或提示发送出去。

请注意 Copilot 如何更新现有方法实现以返回 index.html 文件。
选择接受或按 ⌘Enter (Windows、Linux Ctrl+Enter) 以应用建议的代码更改。

进一步尝试使用 Copilot 聊天，例如，使用环境变量设置端口号，为您的 Web 服务器添加更多路由，或要求 Copilot 聊天添加错误处理等。

使用 Copilot 聊天，您可以使用聊天对话和自然语言指示 Copilot 对您的代码库执行特定任务。使用内联聊天，您可以在编码流程中保持流畅，并在需要时随时请求 AI 帮助，而无需切换上下文。

在您处理新的代码库或探索新的编程语言时，您可能会遇到更多一般性的编码问题。Copilot 聊天让您可以在侧面打开一个聊天对话，它会跟踪您问题的历史记录。

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

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

请注意，聊天响应包含丰富的结果，包括文本和代码块。聊天响应中的代码块支持 IntelliSense，这使您能够通过将鼠标悬停在代码块上获取有关方法和符号的信息，或转到它们的定义。

除了内联补全和聊天对话，GitHub Copilot 还可以在 VS Code 中的各种位置以及整个开发流程中使用。您可能会在 VS Code 用户界面中通过 _闪烁_ 图标注意到 Copilot 功能的存在。

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

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

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

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

恭喜您，您现在已经使用人工智能来增强您的编码！在本教程中，您成功地在 VS Code 中设置了 Copilot，并使用 Copilot 代码补全、Copilot 聊天和代码操作来帮助您更有效地编码。

您已经开始尝试使用 Copilot，您还可以用它做更多的事情！要详细了解 Copilot 聊天，请继续访问 Copilot 聊天教程.

10/29/2024