🚀 在 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 扩展 首次发布以来，已经过去一年多了。GitHub 的 Oege De Moor 和他的团队与 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 字段拆分为 firstName 和 lastName，最后我们单击“内联差异”以查看 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 “使用 TypeScript 和 Express.js 框架搭建一个 Node.js 网站”，然后再迭代！
  • 您可以通过在聊天输入字段中按 / 将交互范围限定为特定主题。例如，要了解如何在编辑器中打开或关闭面包屑导航，请输入 /vscode 关闭面包屑导航。

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

  • 您还可以将主题用作快捷方式。与其在内联聊天中键入“explain this code”，不如简单地键入“/”+ 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 并不完美（我们也不完美！），它会随着时间推移而改进。Microsoft 和 GitHub Copilot 遵循 负责任的 AI 原则，并采用控制措施来确保您对该服务的体验是适当、愉快和有用的。我们理解，对于 AI 功能的快速扩展存在犹豫和担忧，并且完全尊重那些不想要或不能使用 Copilot 的人。

连接点滴

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

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

在 GitHub、Twitter 和 YouTube 上关注我们。请告诉我们您的想法以及您对 VS Code 中 AI 的任何想法。

谢谢，

Chris 和 VS Code 团队

祝您编码愉快！