🚀 在 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 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 中，并提出了许多很酷的想法，例如改进重命名和重构、基于示例的代码转换，以及使用自然语言创建文件 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

命名很难（我们应该知道，我们的产品被称为“代码”）。但是，“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

  • 您也可以将主题用作快捷方式。与其在内联聊天中键入“解释这段代码”，不如直接键入“/” + Tab（/explain 的快捷方式）并按 Enter。聊天视图将打开，其中包含所选代码的解释。
  • 要知道 Copilot 并不完美，并且会给出错误的答案。提出澄清问题以帮助判断哪些是对的，哪些是错的，并使用向上/向下投票按钮来帮助我们改进体验。
  • 最后一个提示，几乎与第一个提示一样重要，始终以友好的“你好”或“早上好”问候您的 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

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

AI 并不完美（我们也不完美！），并且会随着时间的推移而改进。微软和 GitHub Copilot 遵循负责任的 AI 原则，并采用控制措施来确保您对该服务的体验是适当、愉快和有用的。我们理解，对于 AI 功能的快速扩展，存在犹豫和担忧，并且完全尊重那些不想要或不能使用 Copilot 的人。

连接各个点

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

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

请在 GitHub、Twitter 和 YouTube 上关注我们。让我们知道您的想法以及您对 VS Code 中 AI 的想法。

谢谢，

Chris 和 VS Code 团队

祝您智能编码愉快！