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

远程仓库

2021 年 6 月 10 日,作者:Brigit Murtaugh,@BrigitMurtaugh,Eric Amodio,@eamodio

注意:自从这篇博文发布以来,远程仓库扩展已重命名为 GitHub 仓库。您还可以查看 最新文档,其中包含有关该扩展的最新信息。

我们很高兴推出用于 Visual Studio Code 的全新 远程仓库 扩展!这是一种新的体验,我们与 GitHub 的朋友合作开发,可以快速安全地在 VS Code 中使用源代码仓库。

Remote Repositories extension

更快地打开开源代码仓库

在 VS Code 中,我们从一开始就提供对 Git 的集成支持,并且我们一直通过扩展支持许多其他源代码管理 (SCM) 提供商。这使开发人员能够直接在 VS Code 中克隆和使用仓库。

但是,开发人员每天的大部分工作都涉及阅读其他人的代码:审查拉取请求、浏览开源仓库、尝试新技术或项目、检查上游依赖项以调试应用程序等。所有这些的共同点是,作为第一步,您通常会将仓库克隆到本地,然后在您喜欢的代码编辑器中打开代码(我们希望是 VS Code!)。但是,克隆仓库需要时间,如果您忘记拉取,可能会导致您查看仓库的过时版本,并且如果您不熟悉代码,有时会存在安全风险。

GitHub 发布的全新 远程仓库 扩展,使在 VS Code 中打开源代码仓库的体验变得即时且安全。有了它,您可以直接在 VS Code 中快速浏览、搜索、编辑和提交任何远程 GitHub 仓库(很快,Azure Repos),无需克隆!

您可以处理任意多个仓库,而无需将任何源代码保存在您的计算机上。远程仓库可以为您节省时间和本地磁盘空间,并使您能够完全在 VS Code 中完成所有源代码控制任务。

在这篇博文中,我们将探讨如何轻松地开始使用远程仓库,在打开第一个远程仓库后您可以做些什么,支持此虚拟环境的技术细节,以及您今天如何向我们提供反馈。

在 VS Code 中打开您的第一个远程仓库

让我们在 VS Code 中打开一个远程仓库。首先,请确保您已安装 远程仓库 扩展。

目前,远程仓库支持 GitHub 仓库,对 Azure Repos 的支持即将推出。在这篇博文中,我们将从打开 VS Code 仓库 (microsoft/vscode) 开始。

安装远程仓库扩展后,我们只需单击 VS Code 左下角的远程指示器(以及您已安装的任何其他 远程开发扩展 的命令),即可立即访问其 **打开远程仓库** 命令。

Remote indicator in VS Code

如果您之前没有从 VS Code 登录 GitHub,系统会提示您验证您的 GitHub 帐户。登录后,搜索仓库或拉取请求,选择您想要的仓库,然后您就可以开始了。

在下面的简短视频中,我们搜索并选择了 VS Code 仓库,VS Code 重新加载,仓库的内容就像我们已在本地克隆一样加载。

Gif of using Open Remote Repository command, search for "microsoft/vscode," repo loads, open readme

您能够浏览和贡献到仓库,而无需离开 VS Code。感觉就像您正在使用熟悉的 VS Code 界面处理本地代码,并且可以使用 VS Code 资源管理器、搜索、时间线视图、快速打开等功能,当然还有源代码控制。

您现在已连接到所谓的虚拟工作区(有关虚拟工作区的更多信息,请参见 下方);远程指示器显示“GitHub”。当您将鼠标悬停在远程指示器上时,系统会通知您某些功能在虚拟工作区中不可用。

Hover over remote indicator for limited virtual workspace message

虚拟工作区是一种特殊的设置,某些功能(例如扩展)被禁用或功能有限。您可以轻松地通过单击将鼠标悬停在远程指示器上时显示的 **某些功能** 链接来找出哪些扩展被禁用。

单击链接将显示哪些扩展被禁用以及哪些扩展功能有限。将鼠标悬停在扩展上时可以查看功能限制。

VS Code Extensions view with limited and disabled extensions

如果您希望在虚拟工作区中手动启用扩展,可以在用户 settings.json 文件中使用 extensions.supportVirtualWorkspaces 设置。

    "extensions.supportVirtualWorkspaces": { "<extensionID>": true }

请记住,扩展可能没有实现来处理没有访问本地文件系统的虚拟工作区,因此扩展可能无法按预期工作。

您打开了仓库,下一步是什么?

在打开仓库后,远程仓库使您能够轻松地贡献到您的项目。

简化的 Git 工作流,让您的项目保持最新

远程仓库可以帮助您始终保持仓库的最新版本,无需任何复杂的 Git 命令。

每次打开新仓库时,您都会打开最新版本。每当远程仓库检测到 GitHub 上有新的更改时,它都会在状态栏中列出您需要拉取多少个提交。

VS Code Status bar showing "GitHub" in remote indicator and 1 pending change

并在资源管理器中突出显示修改后的文件。

VS Code Explorer listing files and README has 1 change

当您提交更改时,它们会自动显示在 GitHub 上 - 您无需推送更改或发布您创建的任何新分支。

创建或签出拉取请求

远程仓库与 GitHub 拉取请求和问题扩展 协同工作,该扩展使您能够直接在 VS Code 中审查和管理来自 GitHub 的拉取请求和问题。并行使用这两个扩展,可以快速签出拉取请求和处理问题,而无需在本地克隆代码或离开 VS Code。

您可以对代码进行更改,基于该更改创建新分支和拉取请求 (PR),然后签出 PR,所有操作只需点击几下即可完成。

Gif using GitHub Pull Request extension to create branch and PR, and check out that PR

您可以在我们的 使用 GitHub 文章中详细了解 GitHub 拉取请求和问题扩展。

将更改隔离到分支

您可能需要在分支之间切换以完成工作。在典型的环境中,这在您需要决定哪些更改需要隐藏或提交时可能会变得很棘手。

远程仓库使您能够轻松地同时处理不同的分支。当您暂停处理一个分支并切换到另一个分支时,系统不会提示您有关隐藏更改的信息 - 它们会自动保留在上一个分支中。当您返回到上一个分支时,您的更改仍然存在,您可以从中断的地方继续。

让我们探讨如何将更改推送到分支。

在状态栏中,选择当前分支以打开分支列表,例如“main”。

VS Code Status bar on Main branch

选择 **+ 创建新分支...** 并为您的分支输入名称。

VS Code Command Palette with options to create new branch

然后您可以切换到该新分支。

Remote Repositories prompt to switch to new branch

新分支将不包括您之前分支中的任何更改。

限制

在使用远程仓库时,存在一些限制。

  • 调试、终端和任务 - 目前不支持。终端在本地文件系统上打开,无法访问远程仓库的虚拟文件系统。
  • 有限的语言智能 - IntelliSense 和 **转到定义** 等功能可能会受到影响,因为许多语言尚不支持远程仓库的虚拟化环境。
  • 搜索 - GitHub 自身搜索存在一些限制,例如它不会索引分支。远程存储库可以通过启用索引来避免此限制并执行全文搜索。索引会从 GitHub 拉取存储库的浅层克隆,并在本地执行全文搜索,从而提供比 GitHub 模糊的默认分支本地搜索更强大的功能。您可以在搜索视图中启用远程存储库的索引。
  • 扩展限制 - 并非所有扩展都支持在虚拟工作区中运行,但随着时间的推移,更多扩展将支持它。严重依赖访问本地文件的扩展无法支持此设置。有关更多详细信息,请参阅下面的虚拟文件系统和工作区部分 此处

我们才刚刚开始这一旅程,因此随着我们继续开发,预计功能集会增长,限制会缩减。

继续在更强大的环境中工作

使用远程存储库,VS Code 在一个并非所有功能都可用的环境中运行,因为不存在物理文件系统。这对于快速开始浏览存储库非常有用,但当您准备进行一些更“高级”的工作时,例如

  • 您想积极地参与存储库并获得 VS Code 的全部功能。
  • 您需要通过定期从远程拉取来积极跟踪存储库的更改。

为了转到更高级的工作流程,远程存储库为您提供了一种“升级”环境并在其中继续工作的方法,从您当前的位置开始。

单击左下角的远程指示器,然后选择继续在…上工作

VS Code Command Palette with "Continue Working on..." command

您将看到三个选项

  • 在本地克隆存储库:将当前仓库克隆到您的本地机器。本地文件资源管理器将弹出,允许您选择磁盘上的位置来克隆远程仓库。
  • 在容器卷中克隆存储库:使用 Dev Containers 扩展在 Docker 容器卷 中克隆当前仓库(您需要安装 Dev Containers 扩展和 Docker)。VS Code 将重新加载并使用 Dev Containers 连接,远程指示器现在将显示Dev Container: {镜像名称}
  • 在 Codespaces 中打开:在 GitHub Codespace 中继续工作。选择此选项时,浏览器将打开并引导您到此存储库的 Codespaces 列表。

VS Code Command Palette with options to continue locally, in a volume, or in Codespaces

现在我们已经探索了如何在 VS Code 中使用远程存储库,我们想描述一些支持该体验的技术细节,以及如何确保您的扩展在远程存储库会话中正常工作。

虚拟文件系统和工作区

支持这种远程工作的核心概念是虚拟文件系统和虚拟工作区。

作为最终用户,您只需要知道要处理哪个仓库或 PR 即可——VS Code 会负责虚拟文件系统并为您管理工作区。作为扩展开发者,您需要采用虚拟文件系统 API 来确保您的扩展按预期运行。

虚拟文件系统的工作原理

在传统 git 工作流程中,您会“git clone”一个仓库,并将副本保存到计算机的本地文件系统中。但在使用远程存储库时,代码不会驻留在您的本地计算机上;它仍然只存在于 GitHub 上。

您通过虚拟文件系统与代码进行交互,虚拟文件系统是物理磁盘上存在文件的抽象。虚拟文件系统可以从代码托管服务(如 GitHub)、云存储或数据库提供内容,并将这些内容无缝地作为文件提供给 VS Code 中的用户。

当您在虚拟文件系统上打开工作区时,它被称为虚拟工作区。在虚拟工作区中工作时,您仍然可以访问 VS Code 功能,包括扩展。

确保您的扩展在虚拟工作区中正常工作

为了使扩展正常运行,它们必须支持虚拟文件系统。

当扩展没有代码,而是一个纯粹的颜色主题、键绑定、代码段或语法扩展时,它可以在虚拟工作区中运行,无需任何采用。

运行实际代码的扩展,这意味着它定义了主要入口点,需要检查并可能需要采用。

虚拟文件系统的 API 支持 是通过 FileSystemProvider 接口实现的。为新的 URI 模式(例如 vscode-vfs)注册文件系统提供程序,该文件系统上的资源将由使用该模式的 URI 表示(vscode-vfs://github/microsoft/vscode/package.json)。

扩展的 package.json 中有一个 capabilities 属性,virtualWorkspaces 子属性用于指示扩展是否支持虚拟工作区。

您可以在 虚拟工作区扩展作者指南 中详细了解虚拟文件系统、工作区以及如何为扩展实现它们。

反馈和进一步阅读

我们非常高兴您尝试使用远程存储库,并期待您的反馈。

请安装 远程存储库 扩展。您可以提交任何 问题或功能请求,或者在 Twitter 上向我们分享您的想法 @code

您还可以查看我们关于如何使用远程存储库扩展的新 YouTube 视频

如果您是扩展作者,请查看 扩展作者的虚拟工作区支持指南,并在我们的 跟踪问题 中分享任何问题或反馈。您还可以加入扩展作者社区的 Slack 团队

祝您编码愉快!

Brigit Murtaugh,VS Code 项目经理 @BrigitMurtaugh
Eric Amodio,VS Code 首席软件工程师 @eamodio