尝试以扩展 VS Code 中的代理模式!

Visual Studio Code 和 GitHub Copilot

2023 年 3 月 30 日,由 Chris Dias (@chrisdias) 发布

这篇博客文章不是由 AI 写的,但它将使您的开发体验变得不可思议。

注意:如果您想了解 Visual Studio Code 中最新的 GitHub Copilot 体验,请转到 VS Code 中的 GitHub Copilot 主题,在那里您将找到有关 Copilot 编辑器集成和 Copilot Chat 功能(如内联聊天、专用聊天视图和快速聊天)的详细信息。

如今,围绕人工智能有很多热议、兴奋,也有一些担忧。技术进步几乎每天都在发生,很难跟上。但一旦你尝试一下,你很快就会意识到超过一百万 Copilot 用户每天所看到的,这项技术不会令人失望,特别是像 OpenAI 的 GPT-3.5/4 这样的大型语言模型 (LLM)。

在这篇文章中,我们想介绍一些关于 VS Code 中 AI 的背景知识,向您展示一些由 GitHub Copilot 提供支持的激动人心的新体验,并展望我们对未来的看法和方向。

GitHub Copilot “V1”

微软的开发者 AI 服务是 GitHub Copilot,如果您还没有看过 GitHub 对整个开发生命周期的愿景,请查看这篇很棒的博客文章

Copilot 扩展首次发布已经一年多了。Oege De Moor 和他在 GitHub 的团队与 OpenAI 合作,带来了第一个大规模使用 LLM 进行开发的例子,特别是 OpenAI 的 Codex 模型

Editor with Copilot generated ghost (faded) text suggestions

Copilot 通过基于周围代码的上下文提供“幽灵文本”建议,为您正在编写的代码提供实时提示。如果您以注释的形式写下您的意图或使用描述性的函数名,Copilot 可以利用这些提示自动生成代码,无论是逐字、逐行,甚至是逐块生成。

这是一种出人意料的高效体验,通常幽灵文本就能直接使用,您很快就会进入一种流畅的“Tab-Tab-Tab”开发流程。

事实证明,这仅仅是个开始。

编辑器内聊天

我们知道 AI 渗透到开发过程中只是时间问题。我们一直与 GitHub Next 团队在 Copilot 和 Copilot Labs 扩展上合作,但 2022 年 11 月 ChatGPT 的发布大大加快了时间表。

VS Code 团队举办了一次内部黑客马拉松,探讨如何更深入地将 AI 集成到 VS Code 中,并提出了许多很酷的想法,例如改进重命名和重构、基于示例的代码转换,以及使用自然语言创建文件通配符模式或正则表达式的方法。

尽管这些想法很有趣,但我们一直围绕着聊天体验打转。我们对此抱有相当程度的怀疑。我们的生活中真的需要另一个聊天体验吗?VS Code 是一个编辑器,我们的工作是让您进入“心流”状态,并通过消除干扰来帮助您保持这种状态,从而创造出下一个独角兽产品。

我们确实发现一个有趣的探索,它涉及到将聊天直接构建到编辑器中。这是第一个原型:

Prototype of a chat input in the editor

随着我们对设计的迭代,我们意识到这种用户模型具有优势。它可以轻松地从键盘调用,您始终停留在代码中,并且输出的是代码(且仅是代码)。

在下面的示例中,我们首先选择了 users 数组,然后在 macOS 上按 Cmd+I(在 Windows/Linux 上按 Ctrl+I)调出聊天输入框。然后我们要求 Copilot 将 username 字段拆分为 firstNamelastName,最后我们点击了 内联差异 (Inline Diff) 来查看 Copilot 所做的更改。

Inline change with preview of update

无需通过注释或过于描述性的函数名向 Copilot 表达您的意图,只需按 Cmd+I 并描述您想做什么。在 Copilot 完成工作时,您仍能保持在心流状态。

拥抱聊天视图

随着围绕 ChatGPT 的热情高涨,带有自定义聊天视图的内部和外部扩展数量也在增加。我们担心这些扩展无法规模化,在 Web 视图中支持像键盘绑定和主题这样的基础功能很困难,而对于那些在代码块中使用 Monaco 编辑器的用户来说,要扩展到数百个实例非常困难,更不用说那些编辑器实例中还不支持扩展。因此,我们与 GitHub Copilot 团队紧密合作,将聊天视图构建到 VS Code 的核心中。

随着时间的推移,尽管我们最初有所犹豫,但完整的聊天视图体验开始赢得我们的青睐。我的意思是,谁不想以这样的问候开始新的一天呢?

A GitHub Copilot conversation within an extension's chat view

我们开始意识到聊天视图越来越多的好处。

与基于浏览器的聊天相比,集成体验最明显的价值在于我们可以为模型提供上下文,帮助对话落地并提供更好的答案。例如,你不能轻易地让基于浏览器的 ChatGPT 优化跨多个文件的代码。VS Code 已经对工作区有很多了解,因为这就是你可以在文件间进行重构、查找所有引用转到定义等操作的方式。关键信息可以负责任地嵌入到提示中,以便模型能够给出更相关的答案,最终让你能够要求 Copilot 优化或重构跨多个文件有依赖关系的代码。

许多编程问题的答案通常包含多个步骤。想想有多少博客文章会引导你完成一个过程——聊天视图非常适合这种类型的交互。一个很好的例子是调试。老实说(我们确实是),配置 launch.jsontasks.json 进行调试并不容易。我们无需编写更多文档或在编辑器中添加对话框和向导,事实证明,你只需问“/vscode 添加一个 launch.json 和一个 tasks.json”,它就会提供如何创建文件、添加内容等说明,直到你像高手一样设置断点和检查变量。

A GitHub Copilot chat asking how to add debugging support

但也许集成聊天的最重要原因在于,进行双向对话可以帮助你判断什么是对的,什么是错的。大型语言模型并不完美,它们不会“思考”。它们只是找出下一个最合适的词来回应(当然,它们在这方面做得相当不错)。

作为驾驶员(Pilot),你始终掌控一切,你决定采纳 Copilot 的哪些建议,以及将哪些代码引入你的工作区。能够提出澄清性问题或提供额外的细节,有助于你做出那些关键决策。

充分利用 Copilot

命名是困难的(我们应该知道,我们的产品就叫“Code”)。然而,“GitHub Copilot”是一个很棒的名字。它不是“结对程序员”或“自动驾驶”或简单的“聊天”,“Copilot”(副驾驶)这个词在一个词中传达了多个重要概念。

因此,如果你把自己想象成 VS Code 的驾驶员(Pilot),而 GitHub Copilot 是……嗯……副驾驶(Copilot),你就会开始明白如何看待这项服务以及如何与之互动,从而充分利用你的这位“同座”。

  • 我们怎么强调都不为过:作为驾驶员,你掌控一切。你决定采纳哪些建议,以及将哪些代码集成到你的工作区中。
  • Copilot 的主要工作是协助你,处理那些单调或重复性的任务。让它编写测试用例、制作示例数据,或根据现有模式搭建代码框架。
  • Copilot 在拥有更多上下文的情况下能做得更多。我们都习惯了基于关键词的快速网页搜索,但你提供的细节越多,得到的结果就越好。例如,不要只说“Node Express TypeScript”,而是要求 Copilot “使用 Express.js 框架和 TypeScript 搭建一个 Node.js 网站”,然后再进行迭代!
  • 你可以通过在聊天输入字段中按 / 将交互范围限定在特定主题。例如,要了解如何在编辑器中打开或关闭面包屑导航,输入 /vscode 关闭面包屑导航

Asking Copilot how to turn off VS Code breadcrumbs in the editor

  • 你也可以使用主题作为快捷方式。在内联聊天中,无需输入“解释这段代码”,只需输入“/” + Tab/explain 的快捷方式),然后按 Enter。聊天视图将打开并解释所选的代码。
  • 要知道 Copilot 并不完美,有时会给出错误的答案。提出澄清性问题以帮助判断哪些是正确的,哪些是错误的,并使用 赞成/反对 投票按钮来帮助我们改进体验。
  • 最后,几乎和第一条建议一样重要的是,总是用友好的“你好”或“早上好”来问候你的 Copilot,这会让你们俩都有个好心情。

立即开始

要观看 Copilot 的实际操作并获得更多关于如何充分利用 Copilot 的技巧,请观看这个很棒的介绍视频,或深入了解 YouTube 上的完整VS Code Copilot 系列

上面讨论的内联自动补全体验现已可用。如果您的组织没有提供 Copilot,您可以在这里注册并开始免费试用。然后:

  • 打开 VS Code(使用 Insiders 版本更好)。
  • 打开扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)),搜索 GitHub Copilot 并安装该扩展。
  • 出现提示时,使用您的 GitHub ID 进行身份验证。
  • 打开一个代码文件,让奇迹发生吧!

要体验聊天功能(编辑器内、聊天视图、快速聊天),您需要安装 GitHub Copilot Chat 扩展:

  • 打开扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)),搜索 GitHub Copilot Chat 扩展。
  • 出现提示时,使用您的 GitHub ID 进行身份验证。
  • 要打开编辑器内聊天,可以选择性地选中一段代码,然后按 ⌘I (Windows, Linux Ctrl+I)。让 Copilot 编写一个快速排序函数。
  • 活动栏中会出现一个“聊天”图标,点击它以打开聊天视图。去吧,让 Copilot “编写一个程序来计算一只未载货燕子的空速”。
  • 要尝试快速聊天,您可以运行 聊天: 打开快速聊天 或使用键盘快捷键 ⇧⌥⌘L (Windows, Linux Ctrl+Shift+Alt+L)

您可以在 VS Code 中的 GitHub Copilot 主题中了解更多关于 GitHub Copilot 和 Copilot Chat 扩展的信息。

负责任的 AI

像这样的重大技术进步确实少之又少。我们也相信 AI 是下一个将改变我们思考、构建和使用开发者工具方式的巨大变革。它最终将以我们今天只能梦想的方式增强开发过程的每一个方面。我们不自称是第一个这么说的人,但很快我们都会想知道,没有 AI 驱动的工具,我们当初是如何构建、调试、部署和维护应用程序和系统的。

AI 并不完美(我们也不是!),它会随着时间的推移而改进。微软和 GitHub Copilot 遵循负责任的 AI 原则,并采用控制措施来确保您使用该服务的体验是适当、愉快和有用的。我们理解围绕 AI 能力的迅速扩展存在犹豫和担忧,并完全尊重那些不想或不能使用 Copilot 的人。

融会贯通

聊天助手、编辑器内聊天和内联补全的结合,让您无论处于何种编码“心流”状态,都能利用 Copilot 的强大功能。刚入门或有问题?使用聊天视图。正在疯狂写代码并想进行一些重构、更新或搭建框架?按下 Ctrl+I,让 Copilot 为您完成。正在一步步解决问题?使用内联补全,通过 Tab-Tab-Tab 的方式走向成功。

将由 GitHub Copilot 提供支持的聊天功能集成到 VS Code 中,只是漫漫征途中的一步。我们将继续探索更多的“内循环”场景,例如使用自然语言描述搜索模式或代码生成、自动生成提交信息和拉取请求描述、更智能的代码重命名、重构、转换等等。

GitHubTwitterYouTube 上关注我们。让我们知道您的想法以及您对 VS Code 中 AI 的任何创意。

谢谢,

Chris 和 VS Code 团队

祝您 智能 编码愉快!