编辑

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) 以应用建议的代码更改。
如果您对建议的更改不满意，您可以修改提示并保持迭代以获得不同的解决方案。例如，要求为端口号使用不同的环境变量名称。

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

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

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