现已推出!阅读 10 月份的新功能和修复。

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 扩展,但 ChatGPT 在 2022 年 11 月的发布大大加快了时间表。

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,最后我们点击了内联差异以查看 Copilot 所做的更改。

Inline change with preview of update

无需使用注释或过于描述性的函数名称向 Copilot 表达您的意图,只需按 Cmd+I 并描述您想做什么。让 Copilot 完成工作,您就可以继续专注于工作。

拥抱聊天视图

随着 ChatGPT 的热潮兴起,使用自定义聊天视图的内部和外部扩展的数量也随之增加。我们担心这些扩展无法扩展,很难支持诸如键盘绑定和主题等基本功能,并且对于那些在代码块中使用 Monaco 编辑器的用户来说,很难扩展到数百个实例,更不用说这些编辑器实例中没有扩展支持了。因此,我们与 GitHub Copilot 团队紧密合作,将聊天视图构建到 VS Code 的核心。

随着时间的推移,尽管我们最初犹豫,但完整的聊天视图体验开始让我们折服。我的意思是,谁不希望以这样的问候开始新的一天呢?

A GitHub Copilot conversation within an extension's chat view

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

与基于浏览器的聊天相比,集成体验最明显的价值在于,我们可以为模型提供上下文,帮助定位对话并提供更好的答案。例如,您无法轻松地要求基于浏览器的 ChatGPT 优化跨越多个文件的代码。VS Code 已经了解有关工作区的大量信息,因为这就是您可以跨文件进行重构、查找所有引用转到定义等的方式。关键信息可以安全地嵌入提示中,以便模型可以提供更相关的答案,最终让您要求 Copilot 优化或重构跨越多个文件的代码。

许多编程问题的答案通常包括多个步骤。想想有多少博客文章引导您完成一个过程 - 聊天视图非常适合这种交互方式。调试就是一个很好的例子。如果我们说实话(我们就是这样做的),配置 launch.jsontasks.json 用于调试并不容易。与其编写更多文档或在编辑器中添加对话框和向导,不如简单地询问“/vscode add a launch.json and a tasks.json”,然后它将提供有关如何创建文件、要添加的内容等的说明,直到您像老板一样命中断点并检查变量。

A GitHub Copilot chat asking how to add debugging support

但也许集成聊天的最重要原因是,进行双向对话可以帮助您确定什么是正确,什么是错误。大型语言模型并不完美,它们不会“思考”。它们只是想出下一个最合适的词来回应(当然,它们在这方面非常擅长)。

作为飞行员,您始终掌控全局,您决定接受 Copilot 的哪些建议以及将哪些代码引入您的工作区。能够提出澄清问题或提供更多详细信息可以帮助您做出这些关键决定。

充分利用 Copilot

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

因此,如果您将自己视为 VS Code 的飞行员,而将 GitHub Copilot 视为…嗯…副驾驶,那么您就会开始了解如何看待这项服务以及如何与它互动,以充分利用您的座位伙伴。

  • 我们无法强调这一点:作为飞行员,您掌控全局。您决定接受哪些建议以及将哪些代码集成到您的工作区。
  • Copilot 的主要任务是帮助您完成琐碎或重复的任务。让它编写测试用例、制作示例数据或根据现有模式构建代码。
  • Copilot 可以通过更多上下文做更多的事情。我们都习惯了快速的基于关键词的网络搜索,但您提供的详细信息越多,您将获得的结果就越好。例如,不要问“Node Express TypeScript”,而是要求 Copilot “使用 TypeScript 使用 Express.js 框架构建 Node.js 网站”,然后进行迭代!
  • 您可以通过在聊天输入字段中按 / 将交互范围限定到特定主题。例如,要了解如何在编辑器中打开或关闭面包屑,请输入 /vscode Turn off breadcrumbs

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

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

人工智能并不完美(我们也不完美!),它会随着时间的推移而改进。Microsoft 和 GitHub Copilot 遵循 负责任的人工智能 原则,并采用控制措施来确保您在使用该服务的体验是适当的、愉快的和有用的。我们理解人们对人工智能能力快速扩展持怀疑和担忧的态度,完全尊重那些不愿意或无法使用 Copilot 的人。

连接点

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

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

请关注 GitHubTwitterYouTube。请告诉我们您的想法以及您对 VS Code 中人工智能的建议。

谢谢!

Chris 和 VS Code 团队

祝您 **智能** 编码愉快!