参加你附近的 ,了解 VS Code 中的 AI 辅助开发。

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”

Microsoft 的开发者 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.json` 和 `tasks.json` 进行调试并不容易。与其让我们编写更多的文档或向编辑器添加对话框和向导功能,结果是你可以简单地询问“/vscode 添加一个 `launch.json` 和一个 `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“使用 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“编写一个程序来计算未负载燕子的空速”。
  • 要尝试快速聊天,你可以运行 Chat: Open Quick Chat 或使用键盘快捷键 ⇧⌥⌘L (Windows, Linux Ctrl+Shift+Alt+L)

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

负责任的 AI

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

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

融会贯通

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

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

请在 GitHubTwitterYouTube 上关注我们。让我们知道你对 VS Code 中 AI 的看法和想法。

谢谢,

Chris 和 VS Code 团队

祝你智能编码愉快!

© . This site is unofficial and not affiliated with Microsoft.