在VS Code中开始使用GitHub Copilot

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

Tip

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

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

先决条件

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

按照以下步骤在VS Code中设置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网络服务器。

首先，在工作区中添加一个新的TypeScript文件 server.ts。
现在，按下键盘上的 ⌘I (Windows, Linux Ctrl+I) 来启动 Copilot 内联聊天。

Copilot 内联聊天为您提供了一个聊天界面，让您可以就活动编辑器中的代码提出问题。
在聊天输入框中输入"添加一个简单的express web服务器"，然后按Enter键将提示发送给Copilot。

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

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

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

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

当你在一个新的代码库中工作，或者探索一种新的编程语言时，你可能会遇到一些更普遍的编码问题。Copilot Chat 允许你在旁边打开一个聊天对话，并跟踪你问题的历史记录。

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

Tip
您可以随时从命令中心菜单访问不同的Copilot功能。
在聊天输入框中输入“什么是递归？”并按Enter将请求发送给Copilot。

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

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

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

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

工作集包含可以由Copilot编辑修改的文件。如果文件未添加，请使用*添加文件...将文件添加到工作集中。
在聊天输入框中输入返回一个静态HTML页面作为主页并实现它。，然后按下Enter以开始新的编辑会话。

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

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

除了内联补全和聊天对话外，GitHub Copilot 在 VS Code 中的不同位置以及整个开发流程中都可用。您可能会通过 VS Code 用户界面中的sparkle图标注意到 Copilot 功能的存在。

其中一个地方是编辑器中的Copilot编码操作，每当您因为编译器错误而看到红色波浪线时。让我们看看Copilot如何帮助解决编码错误。

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

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

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