现已发布!阅读关于 11 月份的新功能和修复。

Visual Studio Code 和 GitHub Copilot

2023 年 3 月 30 日,作者:Chris Dias,@chrisdias

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

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

如今,围绕人工智能存在着大量的热议、兴奋和一些担忧。进步几乎每天都在发生,很难跟上。但是,一旦你尝试一下,你很快就会意识到超过一百万 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 中,并提出了许多很酷的想法,例如改进的重命名和重构、基于示例的代码转换以及使用自然语言创建文件 glob 模式或正则表达式的方法。

尽管这些想法很有趣,但我们一直在围绕聊天体验进行讨论。我们对此持谨慎态度。我们真的需要在生活中再添加一种聊天体验吗?VS Code 是一个编辑器,我们的工作是让你进入“状态”,并通过消除干扰来帮助你保持状态,同时你也可以完成下一个独角兽项目。

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

Prototype of a chat input in the editor

当我们迭代设计时,我们意识到这种用户模型具有优势。它可以很容易地从键盘调用,你可以留在你的代码中,并且输出是代码(并且只有代码)。

在下面的示例中,我们首先选择了 users 数组,然后在 macOS 上按 Cmd+I(或在 Windows/Linux 上按 Ctrl+I)来调出聊天输入。然后,我们要求 Copilot 将 username 字段拆分为 firstNamelastName,最后我们点击了内联差异,以查看 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

但也许集成聊天的最重要的原因是因为双向对话可以帮助你决定什么是对的,什么是错的。大型语言模型并不完美,它们不会“思考”。它们只是找出接下来最好的词来回应(当然,它们在这方面做得很好)。

作为飞行员,你始终负责,并且你决定采用 Copilot 的哪些建议以及将哪些代码引入你的工作区。提出澄清问题或提供其他细节的能力可以帮助你做出这些关键决策。

充分利用 Copilot

命名很难(我们应该知道,我们的产品名为“Code”)。但是,“GitHub Copilot”是一个很好的名字。与其使用“pair programmer”(结对程序员)或“auto pilot”(自动驾驶)或仅仅是“chat”(聊天),“Copilot”在一个词中传达了多个重要概念。

因此,如果你将自己视为 VS Code 的飞行员,而将 GitHub Copilot 视为……嗯……副驾驶,你就会开始了解如何考虑该服务以及如何与之交互以从你的同伴中获得最大收益。

  • 我们再怎么强调也不为过:作为飞行员,你负责。你决定采用哪些建议以及将哪些代码集成到你的工作区中。
  • Copilot 的主要工作是协助你,处理平凡或重复的任务。让它编写测试用例、创建示例数据或根据现有模式搭建代码。
  • Copilot 可以通过更多上下文来做更多事情。我们都习惯于快速的基于关键字的网络搜索,但是你提供的细节越多,你将获得更好的结果。例如,与其使用“Node Express TypeScript”,不如要求 Copilot “使用 TypeScript 使用 Express.js 框架搭建一个 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

像这样的技术进步确实非常罕见。我们也认为人工智能是下一个重大转变,它将改变我们对开发工具的思考、构建和使用方式。它最终将以我们今天只能梦想的方式增强开发过程的方方面面。我们不声称是第一个说这话的人,但很快我们都会想知道,如果没有人工智能驱动的工具,我们是如何构建、调试、部署和维护应用程序和系统的。

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

连接点

聊天助手、编辑器内聊天和内联补全的结合让您无论身处何种编码“区域”都能利用 Copilot 的强大功能。刚开始使用或有疑问?使用聊天视图。在疯狂编写代码并想进行一些重构、更新或脚手架?按下Ctrl+I并让 Copilot 为您完成。逐步解决问题?使用内联补全,通过 Tab-Tab-Tab 一路走向成功。

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

请在 GitHubTwitterYouTube 上关注我们。请告诉我们您的想法以及您对 VS Code 中人工智能的任何想法。

谢谢!

Chris 和 VS Code 团队

祝您编码愉快!