VS Code 中 Copilot Chat 入门
本教程将引导你如何在 Visual Studio Code 中使用 Copilot Chat。你可以使用 AI 驱动的聊天对话来帮助重构代码、提高代码理解能力以及配置 VS Code。
如果你是 VS Code 中 Copilot 的新用户,请参阅Copilot 概述,或在Copilot 快速入门中进行设置并了解其主要功能。
如果你还没有 Copilot 订阅,可以通过注册Copilot 免费套餐免费使用 Copilot,并获得每月补全和聊天交互的限制。
先决条件
要在 VS Code 中使用 GitHub Copilot,你需要具备以下条件
- 访问 GitHub Copilot 的权限
- 在 VS Code 中安装 GitHub Copilot 扩展
按照GitHub Copilot 设置指南中的步骤获取 GitHub Copilot 访问权限并在 VS Code 中安装 Copilot 扩展。
开始首次聊天对话
Copilot Chat 允许你使用自然语言与 GitHub Copilot 交互,以提问并获取与编码相关问题的答案。
在本教程中,你将创建一个简单的 Node.js Web 应用程序。
-
打开新的 VS Code 窗口。你将在后续步骤中创建一个新的工作区。
-
从标题栏的 Copilot 菜单中选择打开聊天,或使用键盘快捷方式⌃⌘I (Windows、Linux Ctrl+Alt+I)。
请注意,聊天视图在辅助侧边栏中打开。将聊天视图放在侧边可以让你在处理代码时继续对话。
-
在聊天视图中,从聊天模式下拉菜单中选择提问。
使用提问模式向 Copilot 询问有关编码和技术主题的问题、解释代码或集思广益。
-
让我们向 Copilot 询问流行的 Web 框架。在聊天输入字段中输入“最流行的 Web 框架有哪些?”
Copilot 返回一个流行的 Web 框架列表。尝试提出后续问题以获取有关特定框架的更多信息,或比较框架。例如,你可以问“Express 和 Fastify 有什么区别?”或“如何进行服务器端渲染?”。
-
要搭建新的 Web 应用,请在聊天输入字段中输入“使用 TypeScript 和 Pug 的新 Express 应用”。
请注意,Copilot 返回一个文件树,表示新的工作区文件。选择文件树中的任何文件以预览其内容。
-
选择创建工作区以创建应用,并选择磁盘上应创建工作区的文件夹。
在对话框中选择打开以在 VS Code 中打开新创建的工作区。
注意VS Code 可能会询问你是否信任新工作区。选择是,我信任此内容以信任工作区。获取有关工作区信任的更多详细信息。
使用内联聊天保持工作流
虽然聊天视图非常适合保持对话,但编辑器内联聊天专为你在编辑器中处理代码时向 Copilot 提问的情况而优化。例如,重构特定代码片段或解释复杂算法。
让我们看看如何使用编辑器内联聊天进行代码重构。
-
打开
app.ts
文件并使用键盘快捷方式⌘I (Windows、Linux Ctrl+I) 调出编辑器内联聊天。或者,从标题栏的 Copilot 菜单中选择编辑器内联聊天。编辑器中会出现一个内联聊天输入字段,你可以在其中输入聊天提示并向 Copilot 询问编辑器中的代码。
-
在聊天输入字段中输入“添加对 JSON 输出的支持”并按 Enter。
请注意,Copilot 如何提供代码建议以在 Express 中添加对 JSON 输出的支持。
-
选择接受或关闭以应用或忽略更改。
如果你对建议的代码更改不满意,可以选择重新运行请求控件或提出后续问题以获取其他建议。
在编辑器中右键单击并选择Copilot上下文菜单以访问常用的 Copilot 命令,例如修复或解释代码或生成测试。
跨多个文件进行编辑
使用内联聊天,你对单个文件进行了更改。你还可以通过在聊天视图中切换到编辑模式,使用 Copilot 对工作区中的多个文件进行更改。
让我们使用编辑模式,使用 .env
文件来存储 Web 应用的配置。
-
打开聊天视图并从聊天模式下拉菜单中选择编辑。
-
为了帮助 Copilot 理解你请求的范围,让我们将
package.json
和app.ts
作为上下文添加到提示中。-
在聊天视图中选择添加上下文,在搜索字段中输入
package
,然后从文件列表中选择package.json
文件。请注意,你可以添加多种类型的上下文。 -
在编辑器中打开
app.ts
文件,并注意 Copilot 会自动将活动文件添加到聊天上下文中。
-
-
在聊天输入字段中输入“使用 .env 文件进行配置”并按 Enter。
-
请注意 Copilot 如何在多个文件之间进行更新,并向你的工作区添加一个新的
.env
文件。聊天视图中以粗体文本显示已更改的文件。
-
在聊天视图中选择保留以确认所有建议的更改。
使用编辑器中的覆盖控件可以轻松导航和查看文件中单个更改。
开始智能代理编码工作流
对于更复杂的请求,你可以使用代理模式让 Copilot 自主规划和执行完成请求所需的任务。这些任务可能涉及编辑代码,也可能包括在终端中运行命令。在代理模式下,Copilot 可能会调用不同的工具来完成任务。
让我们使用代理模式,将 Web 应用用于分享旅行技巧并添加测试。
-
打开聊天视图并从聊天模式下拉菜单中选择代理。
-
在聊天输入字段中输入“将应用设为旅行博客。添加测试以避免代码回归。”并按 Enter。
请注意,你无需向提示添加上下文。代理模式会自动分析工作区中的代码。
-
Copilot 会迭代应用代码更改并运行命令,例如运行测试。在聊天视图中选择继续以确认终端命令。
根据请求的复杂性,Copilot 可能需要几分钟才能完成所有任务。如果在此过程中遇到问题,它会迭代修复它们。
-
Copilot 完成任务后,请查看更改并测试应用。
你还可以通过提供诸如“运行应用”或“启动服务器”之类的提示,要求 Copilot 运行应用。
恭喜
恭喜,你已成功在 VS Code 中使用 Copilot Chat 提问并在工作区中进行代码编辑。继续尝试不同的提示和聊天模式,以充分利用 Copilot Chat。