VS Code 中的聊天入门
本教程将指导您使用 Visual Studio Code 中的聊天功能。您可以利用 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 扩展。
开始第一次聊天对话
聊天功能让您能够通过自然语言与 GitHub Copilot 进行交互,就与编码相关的问题提问并获得解答。
在本教程中,您将创建一个简单的 Node.js Web 应用程序。
-
打开一个新的 VS Code 窗口。您将在后续步骤中创建一个新的工作区。
-
在标题栏的“聊天”菜单中选择“打开聊天”,或使用键盘快捷键 ⌃⌘I(Windows、Linux Ctrl+Alt+I)。

请注意,“聊天”视图会打开在辅助侧边栏。将“聊天”视图放在侧边,可以让您在处理代码的同时继续对话。
-
在“聊天”视图中,从聊天模式下拉列表中选择“提问”。
使用提问模式来询问关于编码和技术主题的问题、解释代码或集思广益。

-
让我们来询问流行的 Web 框架。在聊天输入框中输入“most popular web frameworks?”(最流行的 Web 框架是什么?)
VS Code 会返回一个流行的 Web 框架列表。尝试提出后续问题以获取有关特定框架的更多信息,或比较不同框架。例如,您可以问“Express 和 Fastify 有什么区别?”或“如何进行服务器端渲染?”
-
要脚手架一个新的 Web 应用,请在聊天输入框中输入“new express app with typescript and pug”(使用 TypeScript 和 Pug 创建新的 Express 应用)。
注意 VS Code 如何返回一个代表新工作区文件的文件树。点击文件树中的任何文件即可预览其内容。

-
选择“创建工作区”来创建应用,然后选择一个磁盘上的文件夹来创建工作区。
在对话框中选择“打开”以在 VS Code 中打开新创建的工作区。
注意VS Code 可能会询问您是否信任新工作区。选择“是的,我信任这些内容”来信任该工作区。了解有关工作区信任的更多详细信息。
在代码编辑区内聊天,保持工作流畅
虽然“聊天”视图非常适合进行持续的对话,但编辑器内聊天针对的是您希望就当前正在编辑器中处理的代码向 Copilot 提问的情况。例如,重构特定的代码块或解释复杂的算法。
让我们看看如何使用编辑器内聊天进行代码重构。
-
打开
app.ts文件,并使用键盘快捷键 ⌘I(Windows、Linux Ctrl+I) 来调出编辑器内聊天。或者,在标题栏的“聊天”菜单中选择“打开内联聊天”。聊天输入框会出现在编辑器内,您可以在其中输入聊天提示,并就编辑器中的代码向 Copilot 提问。

-
在聊天输入框中输入“Add support for JSON output”(添加对 JSON 输出的支持)并按 Enter。
注意 Copilot 如何提供代码建议来为 Express 添加对 JSON 输出的支持。

-
选择“接受”或“关闭”以应用或忽略更改。
如果您对建议的代码更改不满意,可以选择“重新运行请求”控件,或提出后续问题以获得另一项建议。
右键单击编辑器即可访问常用的 AI 命令,例如修复或解释代码,或生成测试。
跨多个文件进行编辑
通过内联聊天,您可以修改单个文件。您还可以通过切换“聊天”视图中的编辑模式,使用 Copilot 来修改工作区中的多个文件。
让我们使用编辑模式,通过一个 .env 文件来存储 Web 应用的配置。
-
打开“聊天”视图,并从聊天模式下拉列表中选择“编辑”。

-
为了帮助 Copilot 理解您的请求范围,让我们将
package.json和app.ts添加为提示的上下文。-
在“聊天”视图中选择“添加上下文”,在搜索框中输入
package,然后从文件列表中选择package.json文件。请注意,您可以添加多种类型的上下文。 -
在编辑器中打开
app.ts文件,并注意 Copilot 自动将当前活动文件添加到聊天上下文中。
-
-
在聊天输入框中输入“Use a .env file for configuration”(使用 .env 文件进行配置)并按 Enter。
-
注意 Copilot 如何跨多个文件进行更新,并将一个新
.env文件添加到您的工作区。“聊天”视图以粗体显示已更改的文件。

-
在“聊天”视图中选择“保留”以确认所有建议的更改。
使用编辑器中的叠加控件可以轻松导航和查看文件中的各项更改。
启动代理式编码流程
对于更复杂的请求,您可以使用代理模式,让 Copilot 自主规划和执行完成请求所需的任务。这些任务可能包括编辑代码,但也可以包括在终端中运行命令。在代理模式下,Copilot 可能会调用不同的工具来完成任务。
让我们使用代理模式将 Web 应用变成一个旅行技巧分享应用,并添加测试。
-
打开“聊天”视图,并从聊天模式下拉列表中选择“代理”。

-
在聊天输入框中输入“Make the app a travel blog. Add tests to avoid code regression.”(将应用变成一个旅行博客。添加测试以避免代码回归。)并按 Enter。
请注意,您无需为提示添加上下文。代理模式会自动分析工作区中的代码。
-
Copilot 会迭代地应用代码更改并运行命令,例如运行测试。通过在“聊天”视图中选择“继续”来确认终端命令。

根据您的请求复杂度,Copilot 可能需要几分钟才能完成所有任务。如果在此过程中遇到问题,它会进行迭代修复。
-
Copilot 完成任务后,请审查更改并测试应用。
您还可以通过输入类似“Run the app”(运行应用)或“Start the server”(启动服务器)的提示来让 Copilot 运行应用。
恭喜
恭喜您!您已成功在 VS Code 中使用 Copilot Chat 提问并在整个工作区中进行了代码编辑。请继续尝试不同的提示和聊天模式,以充分利用 Copilot Chat 的功能。