在 VS Code 中开始使用 GitHub Copilot
本教程将引导你了解 Visual Studio Code 中 GitHub Copilot 的主要功能。了解如何开始使用 GitHub Copilot 扩展,以便在编辑器中获得 AI 驱动的代码建议,使用聊天对话重构代码,并使用智能操作修复代码错误。
虽然我们在本教程中使用 TypeScript,但请注意,Copilot 还接受过大量其他语言和各种框架的训练。
有关你可以使用 VS Code 中的 GitHub Copilot 执行的操作的概述,请参阅 GitHub Copilot 概述。
先决条件
-
若要在 VS Code 中使用 GitHub Copilot,你必须安装 GitHub Copilot 扩展。安装此扩展时,还会安装 GitHub Copilot Chat 扩展。
-
若要使用 GitHub Copilot,你必须在个人帐户中拥有 GitHub Copilot 的有效订阅,或者需要由你的组织分配席位。
按照以下步骤通过注册订阅并在 VS Code 中安装 Copilot 扩展来在 VS Code 中设置 GitHub Copilot。
获取你的第一个代码建议
若要在 VS Code 中开始使用 GitHub Copilot,你无需执行任何特殊操作。当你正在编辑器中键入代码时,Copilot 会自动在编辑器中向你显示代码建议,以帮助你更高效地编写代码。
-
打开 Visual Studio Code 并创建一个新的 JavaScript 文件
calculator.js
。 -
在 JavaScript 文件中,开始键入以下代码
class Calculator
Copilot 会自动以灰色暗淡文本(虚影文本)建议我们的
Calculator
类的相应方法。在我们的示例中,建议使用add
和subtract
方法。你收到的确切建议可能会有所不同。 -
若要接受建议,请按 Tab 键。
恭喜!你刚刚接受了你的第一个 AI 驱动的内联建议。当你继续键入时,Copilot 会相应地更新内联建议。
-
对于任何给定的输入,可能会有多个建议。在类中键入以下代码以添加
factorial
方法factorial(n) {
-
将鼠标悬停在编辑器中的建议上,你会注意到有多个建议。
你可以使用箭头控件或使用按键绑定来显示下一个(⌥] (Windows, Linux Alt+])) 或上一个(⌥[ (Windows, Linux Alt+[)) 建议。
AI 驱动的代码补全可以帮助你生成样板代码或重复代码,让你保持在开发人员流程中并专注于更复杂的编码任务。
使用内联聊天生成基本 Web 服务器
借助 Copilot 聊天,你可以在 VS Code 中开始与 Copilot 的聊天对话,以便使用自然语言询问有关你的代码的特定任务。
让我们使用内联聊天来帮助生成一个基本的 Express Web 服务器。
-
首先,将一个新的 TypeScript 文件
server.ts
添加到你的工作区。 -
现在,按键盘上的 ⌘I (Windows, Linux Ctrl+I) 以启动 Copilot 内联聊天。
Copilot 内联聊天为你提供了一个聊天界面,你可以使用该界面询问有关活动编辑器中代码的问题。
-
在聊天输入字段中键入“添加一个简单的 Express Web 服务器”,然后按 Enter 以将提示发送给 Copilot。
请注意,Copilot 在编辑器中返回一个流式响应。该响应是简单 Node.js Express Web 服务器的实现。
-
选择接受或按 ⌘Enter (Windows, Linux Ctrl+Enter) 以应用建议的代码更改。
恭喜!你已使用 Copilot 聊天通过聊天和自然语言生成代码。
通过 AI 聊天重构代码
你还可以使用内联聊天重构或改进编辑器中的现有代码。
请注意,我们的 Web 服务器当前正在使用静态端口号 3000
。让我们将其更改为使用环境变量来表示端口号。
-
在编辑器中,选择
server.ts
文件中的3000
端口号,然后按 ⌘I (Windows, Linux Ctrl+I) 以启动内联聊天。 -
在聊天输入字段中键入“使用环境变量来表示端口号”,然后按 Enter 以发送聊天请求或提示。
请注意 Copilot 如何更新现有代码以使用环境变量来表示端口号。
-
选择接受或按 ⌘Enter (Windows, Linux Ctrl+Enter) 以应用建议的代码更改。
-
如果你对建议的更改不满意,你可以修改提示,并要求 Copilot 提供不同的解决方案。
例如,你可以要求 Copilot 使用不同的环境变量名称来表示端口号。
使用 Copilot 聊天提出一般编程问题
当你使用新的代码库或探索新的编程语言时,你可能会遇到更一般的编码问题。Copilot 聊天允许你在侧面打开聊天对话,并保留你的问题历史记录。
-
从命令中心 Copilot 菜单打开聊天视图,或按 ⌃⌘I (Windows、Linux Ctrl+Alt+I)。
提示您可以随时从命令中心菜单访问不同的 Copilot 功能。
-
在聊天输入字段中键入“什么是递归?”,然后按 Enter 将请求发送给 Copilot。
请注意,聊天响应包含丰富的文本和代码块结果。聊天响应中的代码块支持 IntelliSense,您可以通过悬停在方法和符号上来获取有关它们的信息,或转到它们的定义。
-
按照 Copilot 聊天教程中的步骤,了解如何使用 Copilot 聊天来询问有关您特定代码库的问题。
使用 Copilot 编辑(预览)跨多个文件进行编辑
较大的代码更改可能涉及对多个文件进行编辑。使用 Copilot Edits,您可以在编辑器中跨工作区中的多个文件获得 AI 驱动的内联建议。Copilot Edits 不会应用单个代码块,而是会在整个工作区中进行编辑。
让我们使用 Copilot Edits 在 Web 服务器响应中返回 HTML 文件的内容。
-
从命令中心 Copilot 菜单中选择 打开 Copilot Edits,或按 ⇧⌘I (Windows Ctrl+Shift+I,Linux Ctrl+Shift+Alt+I)。
-
此时会打开 Copilot Edits 视图。请注意,
server.ts
文件已添加到工作集中。工作集包含可以由 Copilot Edits 修改的文件。如果文件未添加,请使用*添加文件... 将文件添加到工作集中。
-
在聊天输入字段中输入将静态 HTML 页面作为主页返回并实现它。,然后按 Enter 开始新的编辑会话。
请注意,Copilot Edits 进行了多项编辑:它更新了
server.ts
文件以返回静态 HTML 页面,并且还添加了一个新文件index.html
。 -
如果您对结果满意,请选择 接受 以应用所有建议的更改。
您还可以使用编辑器覆盖控件在不同的编辑文件之间导航并接受/放弃它们。
使用 Copilot 修复代码错误
除了内联完成和聊天对话外,GitHub Copilot 还可以在 VS Code 中不同的地方和贯穿整个开发流程中使用。您可能会在 VS Code 用户界面中通过闪光图标注意到 Copilot 功能的存在。
其中一个地方是编辑器中的 Copilot 代码操作,每当您因编译器错误而出现红色波浪线时。让我们看看 Copilot 如何帮助解决代码错误。
-
在编辑器中打开您之前创建的
server.ts
TypeScript 文件。请注意,
import express from 'express';
语句包含红色波浪线。如果将光标放在红色波浪线上,您会看到 Copilot 闪光出现。 -
选择闪光以查看 Copilot 代码操作,然后选择 使用 Copilot 修复。
-
请注意,此时会出现 Copilot 内联聊天,其中预先填充了错误消息以及解决问题的方案。
您可以直接从聊天响应中选择 插入到终端 按钮,将建议的命令复制到终端中。
后续步骤
恭喜,您现在已经使用了人工智能来增强您的编码!在本教程中,您已成功在 VS Code 中设置了 Copilot,并使用了 Copilot 代码完成、Copilot 聊天和代码操作来帮助您更高效地进行编码。
-
要了解有关 Copilot 聊天的更多信息,请继续阅读 Copilot 聊天教程。
-
要了解有关 Copilot Edits 的更多信息,请继续阅读 Copilot Edits 文档。
相关资源
请观看我们在 YouTube 上的 高级功能 视频,深入了解如何使用 Copilot 进行重构、基于上下文的建议、单元测试等。