现已发布!阅读关于 11 月新增功能和修复的内容。

远程仓库

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

注意:自本博客文章发布以来,“远程仓库”(Remote Repositories)扩展已更名为“GitHub 仓库”(GitHub Repositories)。您还可以查看最新文档,其中包含有关该扩展的最新信息。

我们很高兴推出适用于 Visual Studio Code 的新“远程仓库”(Remote Repositories)扩展!这是我们与 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 帐户。登录后,搜索仓库或 PR,选择您想要的那个,就可以开始使用了。

在下面的短片中,我们搜索并选择了 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 Pull Requests and Issues”扩展配合得很好,该扩展允许您直接在 VS Code 中审查和管理来自 GitHub 的拉取请求和问题。并行使用这两个扩展可以快速检出 PR 并处理问题,而无需在本地克隆代码或离开 VS Code。

您可以更改代码,创建新分支和基于该更改的拉取请求 (PR),然后检出 PR,所有这些都只需点击几下即可完成。

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

您可以在我们的使用 GitHub文章中了解有关“GitHub Pull Requests and Issues”扩展的更多信息。

将更改隔离到分支中

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

“远程仓库”允许您轻松地同时处理不同的分支。当您暂停一个分支上的工作并切换到新分支时,系统不会询问您有关暂存更改的问题——它们会自动保留在先前分支上。当您回到先前分支时,您的更改仍将存在,您可以从上次中断的地方继续。

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

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

VS Code Status bar on Main branch

选择 + Create New 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: {image name}
  • 在 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子属性用于指示扩展是否适用于虚拟工作区。

您可以在虚拟工作区扩展作者指南中了解有关虚拟文件系统、工作区以及如何为扩展实现它们的更多信息。

反馈和延伸阅读

我们非常期待您试用“远程仓库”,并期待您的反馈。

请安装“远程仓库”扩展。您可以提交任何问题或功能请求,或在 @code 上发推文告诉我们您的想法。

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

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

编码愉快!

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

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