编辑

在 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”（添加一个简单的 express Web 服务器），然后按 Enter 键提交提示。

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

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

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

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

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

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

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

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

在后面的步骤中，您将使用聊天来启动编辑会话并跨多个文件进行更改。

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

请注意聊天响应如何包含像 Markdown 文本和代码块这样的丰富结果。
按照聊天教程中的步骤学习如何使用聊天来询问有关您特定代码库的问题。

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

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

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

通过将文件作为上下文添加到您的提示中，AI 模型可以提供更相关的代码编辑。您可以选择使用 Add Context (添加上下文) 按钮，或在提示输入字段中键入 # 后跟文件名，来为您的提示添加更多上下文。
在聊天输入字段中输入 Return a static html page as the home page and implement it (返回一个静态 HTML 页面作为主页并实现它)，然后按 Enter 键开始一个新的编辑会话。

请注意，您的项目应用了多处编辑：创建了一个 index.html 文件，并且 server.ts 文件被更新以返回此文件。
如果您对结果满意，请在聊天视图中选择 Keep (保留) 以应用所有建议的更改。

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

除了内联建议和聊天对话，AI 功能在 VS Code 的整个开发流程中都可用。您可能会通过 VS Code 用户界面中的闪光图标注意到 AI 功能的存在。

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

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

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

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