编辑

开始在 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) 调出编辑器内联聊天。

编辑器内联聊天为你提供了一个聊天界面，让你提问关于活动编辑器中代码的问题或为你生成代码。
在聊天输入字段中键入“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)。
你可以通过不同的方式使用聊天。从模式下拉菜单中选择询问来提问。

在稍后的步骤中，你将使用聊天开始编辑会话并跨多个文件进行修改。

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

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

对于可能需要修改多个文件的较大代码更改，你可以开始一个由 AI 驱动的编辑会话。建议的编辑不是以代码块形式显示在聊天视图中，而是直接应用于工作区中的文件。

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

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

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

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

你也可以在不同的编辑文件之间导航，并使用编辑器叠加控件接受或拒绝它们。

除了内联建议和聊天对话之外，AI 功能还可在 VS Code 的开发者流程中的不同区域使用。你可能会通过 VS Code 用户界面中的星光图标注意到 AI 功能的存在。

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

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

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

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