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

Visual Studio Code 和 GitHub Copilot

2023 年 3 月 30 日，作者：Chris Dias, @chrisdias

AI 并没有写这篇博客，但它将使你的开发体验难以置信。

注意：如果你想了解 Visual Studio Code 中最新的 GitHub Copilot 体验，请前往 GitHub Copilot in VS Code 主题，在那里你会找到关于 Copilot 编辑器集成和 Copilot Chat 功能（如行内聊天、专用聊天视图和快速聊天）的详细信息。

如今，围绕人工智能（AI）有很多热议、兴奋，以及一些担忧。技术进步几乎每天都在发生，让人难以跟上。但是一旦你尝试一下，你很快就会意识到超过一百万 Copilot 用户每天所见证的：这项技术不会让人失望，特别是像 OpenAI 的 GPT-3.5/4 这样的大型语言模型（LLMs）。

在这篇文章中，我们想介绍一些关于 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 扩展上进行合作，但 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`，最后我们点击了 **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 add a `launch.json` and a `tasks.json`”，它就会提供有关如何创建文件、添加内容等说明，直到你像高手一样设置断点和检查变量。

A GitHub Copilot chat asking how to add debugging support

但也许集成聊天的最重要原因在于，双向对话有助于你判断什么是对的，什么是错的。大型语言模型并非完美，它们不会“思考”。它们只是找出下一个最合适的词来回应（当然，它们在这方面做得相当不错）。

作为“飞行员”，你始终掌控一切，由你决定采纳 Copilot 的哪些建议，以及将哪些代码引入你的工作区。能够提出澄清性问题或提供额外的具体信息，有助于你做出这些关键决策。

充分利用 Copilot

命名很难（我们深有体会，我们的产品就叫“Code”）。然而，“GitHub 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 的实际操作并获取更多关于如何充分利用它的技巧，请观看这个很棒的介绍视频，或深入了解 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)。

你可以在 GitHub Copilot in VS Code 主题中了解更多关于 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 团队

祝你**智能**编码愉快！