编辑

在 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 服务器。

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

编辑器内联聊天为你提供了一个聊天界面，让你可以在其中提问有关活动编辑器中代码的问题或为你生成代码。
在聊天输入字段中输入“add a simple express web server”，然后按 Enter 提交提示。

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

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

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

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

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

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

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

从标题栏的 Copilot 菜单中打开聊天视图，或按 ⌃⌘I (Windows, Linux Ctrl+Alt+I)。
你 Residence 可以通过不同方式使用聊天。从模式下拉菜单中选择提问以提问。

在后续步骤中，你将使用聊天启动编辑会话并在多个文件中进行更改。

提示
你 Residence 可以通过从下拉菜单中选择不同的模型来更改聊天中使用的语言模型。
在聊天输入字段中输入“what is recursion?”，然后按 Enter 提交你的聊天提示。

请注意聊天响应如何包含 Markdown 文本和代码块等丰富结果。
按照聊天教程中的步骤，了解如何使用聊天来提问有关你的特定代码库的问题。

对于可能涉及修改多个文件的大型代码更改，你可以启动一个 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 修复。
请注意，编辑器内联聊天会弹出，其中预填充了错误消息和解决问题的方法。

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