🚀 在 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 聊天功能(如内联聊天、专用聊天视图和快速聊天)的详细信息。

如今,围绕人工智能有很多热议、兴奋和一些担忧。进步几乎每天都在发生,很难跟上。但是一旦您尝试一下,您很快就会意识到超过一百万 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 扩展,但 ChatGPT 在 2022 年 11 月的发布大大加快了时间表。

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.jsontasks.json”,然后它会提供有关如何创建文件、要添加的内容等等的说明,直到您像老板一样命中断点并检查变量。

A GitHub Copilot chat asking how to add debugging support

但也许集成聊天的最重要原因是,双向对话有助于您判断什么是对的,什么是错的。大型语言模型并不完美,它们不会“思考”。它们只是找出下一个最佳回复词(当然,它们在这方面做得很好)。

作为飞行员,您始终处于掌控之中,您可以决定采纳 Copilot 的哪些建议以及将哪些代码引入您的工作区。提出澄清问题或提供更多细节的能力有助于您做出这些关键决策。

充分利用 Copilot

命名很难(我们应该知道,我们的产品叫做“Code”)。但是,“GitHub Copilot”是一个很棒的名字。与其说是“结对程序员”或“自动驾驶仪”或仅仅是“聊天”,“Copilot”在一个词中传达了多个重要的概念。

因此,如果您将自己视为 VS Code 的飞行员,并将 GitHub Copilot 视为……嗯……副驾驶,您就开始了解如何思考这项服务以及如何与它互动,从而从您的副驾驶那里获得最大的收益。

  • 我们可以反复强调这一点:作为飞行员,您处于掌控之中。您可以决定采纳哪些建议以及将哪些代码集成到您的工作区中。
  • Copilot 的主要工作是协助您,处理单调或重复的任务。让它编写测试用例、制作示例数据或根据现有模式搭建代码框架。
  • Copilot 可以使用更多上下文做更多事情。我们都习惯了基于快速关键字的 Web 搜索,但是您提供的细节越多,您将获得的结果就越好。例如,与其搜索“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 打招呼“Hello”或“早上好”,这将使您们双方的心情都更好。

立即开始

要观看 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 团队

祝您编码愉快