编辑

在 VS Code 中开始使用 GitHub Copilot

Visual Studio Code 提供了由 GitHub 支持的丰富 AI 功能。在本教程中，您将了解如何在编辑器中编码时使用 AI、询问有关代码的问题以及启动编辑会话以在多个文件间进行更改。

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

先决条件

您的机器上安装了 VS Code。请从Visual Studio Code 网站下载。
可访问 GitHub Copilot。按照这些步骤在 VS Code 中设置 GitHub Copilot。

提示
如果您没有 Copilot 订阅或组织分配的席位，可以直接从 VS Code 中免费注册使用 Copilot，并获得每月一定的补全和聊天交互次数限制。

要在 VS Code 中开始使用 AI 功能，您无需做任何特别的事情。当您在编辑器中键入代码时，Copilot 会自动在编辑器中为您提供代码建议（代码补全），帮助您更高效地编写代码。

打开 VS Code 并创建一个新的 JavaScript 文件 calculator.js。
在 JavaScript 文件中，开始键入以下代码
```
class Calculator
```
请注意，在您键入时，您会自动在编辑器中看到灰色暗淡文本（幽灵文本）形式的 Calculator 类实现的代码建议。由于大型语言模型是非确定性的，您收到的具体建议可能会有所不同。
要接受建议，请按下 Tab 键。

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

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

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

借助基于聊天的 AI，您可以使用自然语言提问有关代码的问题，或要求它为您生成代码。编辑器行内聊天直接在编辑器中提供一个聊天界面，因此您可以针对活动编辑器中的代码提出提示。

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

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

编辑器行内聊天为您提供一个聊天界面，您可以向其询问有关活动编辑器中代码的问题或生成代码。
在聊天输入字段中键入“添加一个简单的 Express Web 服务器”，然后按 Enter 提交提示。

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

恭喜！您已使用编辑器行内聊天通过聊天和自然语言生成代码。

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

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

当您在新代码库中工作或探索新的编程语言时，可能会遇到更一般性的编码问题。通过使用聊天，您可以在旁边进行聊天对话，这会记录您的提问历史。

对于可能涉及更改多个文件的大型代码更改，您可以启动一个 AI 驱动的编辑会话。编辑会直接应用于工作区中的文件，而不是在聊天视图中接收代码块。

让我们开始一个编辑会话，为我们的 Web 服务器返回一个 HTML 文件的内容。

在聊天视图中的模式下拉菜单中选择编辑。
请注意，server.ts 文件已自动添加为您的聊天提示的上下文。

通过将文件添加为提示的上下文，AI 模型可以提供更相关的代码编辑。您还可以选择使用添加上下文按钮向提示添加更多上下文。
在聊天输入字段中输入返回一个静态 HTML 页面作为主页并实现它。，然后按 Enter 开始新的编辑会话。

请注意，您的项目已应用了多处编辑：server.ts 文件现在返回新创建的 index.html HTML 页面。
如果您对结果满意，选择保留以应用所有建议的更改。

您还可以使用编辑器覆盖控件在不同的已编辑文件之间导航，并接受或拒绝更改。

除了行内建议和聊天对话之外，VS Code 中的 AI 功能还贯穿于您的开发流程的各个方面。您可能会通过 VS Code 用户界面中的闪光图标注意到 AI 功能的存在。

其中一个地方是编辑器，每当编译器错误导致出现红色波浪线时。让我们使用 AI 来修复编码错误。

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

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

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