现已发布!了解 11 月的新功能和修复。

远程开发更上一层楼

2022 年 12 月 7 日,作者:Brigit Murtaugh,@BrigitMurtaugh

Visual Studio Code 的核心是一个代码编辑器,它通过我们的远程开发体验与其他环境集成,变得更加强大和灵活。

Spectrum of remote development options

您可能没有考虑到,但 VS Code 有一个内置的命令行界面 (CLI),允许您控制如何启动和管理编辑器 - 您可以通过命令行选项打开文件、安装扩展和输出诊断信息。

Output of code CLI

CLI 在使用 VS Code Desktop 的工作流程中非常有用,但存在一个差距:您无法使用它启动远程实例。因此,我们希望通过将本地和远程更紧密地结合在一起,使 CLI 更加强大来弥补这一差距。

今天,我们很高兴分享我们增强的 code CLI,它允许您启动 VS Code,并通过 VS Code Desktop 或 vscode.dev 远程连接到计算机。更新后的 CLI 内置于最新的 VS Code 版本中,也可独立安装,因此您可以创建与任何计算机的安全连接并远程连接到它,即使您无法在其上安装 VS Code Desktop。

除了新的 CLI 之外,我们还进行了以下更新以改进远程开发

  • 您可以直接从 VS Code UI 启用隧道。
  • 隧道不再处于私有预览状态 – 任何人都可以创建和使用隧道,无需注册。
  • 我们重命名了两个远程扩展,以更清楚地说明它们的工作方式以及它们可以帮助开发的方面
    • “Remote - WSL”扩展现在简称为 WSL
    • “Remote - Containers”扩展已重命名为 Dev Containers,以反映其用于创建开发环境的用途。

从一个工具连接到任何地方

隧道安全地将数据从一个网络传输到另一个网络。您可以使用安全隧道,从 VS Code 桌面或 Web 客户端针对您选择的任何计算机进行开发,而无需设置 SSH 或 HTTPS(当然,如果愿意,也可以这样做😊)。

您有两种很好的方法可以从 VS Code 隧道连接到远程计算机

  • 使用新的增强型 code CLI。
  • 直接从 VS Code UI 启用隧道。

我们将在以下各节中探讨这两种选项。

增强型 code CLI

当我们发布 VS Code 服务器时,我们提到了我们将其集成到 code CLI 中的长期愿景。我们现在已经实现了这一点,并且我们还提供了独立安装的版本,以防您在无法安装 VS Code Desktop 的 VM 或锁定计算机上工作。

以下是在您想要在本地 VS Code 客户端中进行开发的远程计算机上安装 code CLI 并使用其创建安全隧道的步骤。如果您尝试过 VS Code 服务器的私有预览版,这些步骤将非常相似。

注意:如果您在 VS Code 服务器的私有预览期间使用独立的 code-server CLI,则现在应该改用最新的 code CLI(通过最新的 VS Code Desktop 或独立下载)。

  1. 在您想要在本地 VS Code 客户端中进行开发的远程计算机上安装 code CLI。这可以是远程桌面、VM 甚至是适用于 Linux 的 Windows 子系统 (WSL) 发行版。

    CLI 自动包含在您现有的 VS Code 安装中 – 无需额外设置。如果您没有安装 VS Code 或无法在远程计算机上安装它,您可以通过我们下载页面上的独立安装来获取 CLI

    CLI download section

    注意:如果您使用的是独立安装,则以下部分中的命令将以 ./code 而不是 code 开头。

  2. 使用帮助命令仔细检查 CLI 是否安装成功

    code -h
    

    您可以使用以下命令探索特定于隧道的命令

    code tunnel -h
    

    现在您已经安装了 CLI,让我们为这台计算机设置隧道,以便您可以从任何 VS Code 客户端连接到它。

  3. 使用 tunnel 命令创建安全隧道

    code tunnel
    

    此命令会在此计算机上下载并启动 VS Code 服务器,然后创建到它的隧道。

    注意:当您首次在计算机上启动隧道时,系统会提示您接受服务器许可条款。您也可以在命令行上传递 --accept-server-license-terms 以避免提示。

  4. 此 CLI 将输出一个与此远程计算机绑定的 vscode.dev URL,例如 https://vscode.dev/tunnel/<machine_name>/<folder_name>。您可以从您想要的任何计算机打开此 URL。

  5. 首次在客户端上打开 vscode.dev URL 时,系统会提示您在 https://github.com/login/oauth/authorize... URL 上登录您的 GitHub 帐户。这会将您验证到隧道服务,以确保您有权访问正确的远程计算机集。

恭喜,您已成功安装并使用了 code CLI 的最新隧道功能!

从 VS Code UI 启用隧道

如果您在远程计算机上安装了 VS Code,您也可以选择直接从 VS Code UI 创建隧道。如果您已经在 VS Code 中工作,这是一种快速、便捷的方式来启用对您的计算机的远程访问。

在您的远程计算机上打开 VS Code。在 VS Code 帐户菜单中,选择“启用远程隧道访问...”选项,如下面的图像所示。您也可以打开命令面板 ( F1 ) 并运行命令“远程隧道:启用远程隧道访问...”。

Turn on Remote Tunnel Access in the Account menu

系统会提示您登录 GitHub。登录后,将在该远程计算机上启动隧道,您就可以连接到它了

Remote tunnel access is enabled toast

在您选择的客户端中,您可以从上面的通知打开 vscode.dev 链接并开始编码!

通过远程隧道连接

Remote - Tunnels 扩展管理您的本地计算机和远程计算机之间的这些安全隧道。您通过 code CLI 或 VS Code UI 打开的 vscode.dev 实例预装了 Remote Tunnels 扩展。

如果您已经在 VS Code 客户端(桌面或 Web)中工作,并且想要连接到远程隧道,您可以直接安装和使用Remote - Tunnels 扩展。安装扩展后,打开命令面板 ( F1 ) 并运行命令“远程隧道:连接到隧道”。您将能够连接到任何具有活动隧道的远程计算机

List of remote machines in Quick Pick

您还可以在远程资源管理器中查看您的远程计算机,您可以通过命令“远程资源管理器:聚焦远程视图”打开它

List of remote machines in Remote Explorer

删除隧道或计算机

如果您想停止通过 CLI 运行的隧道,请使用 Ctrl + C 来结束活动连接。如果您已通过 VS Code UI 启用了隧道,请运行命令“远程隧道:关闭远程隧道访问...”。

您可以通过在该计算机上运行 code tunnel unregister 来删除计算机与隧道的关联。在 VS Code 中,选择远程资源管理器视图,右键单击要删除的计算机,然后选择“取消注册”。

远程开发扩展

除了隧道和 code CLI 的更新之外,我们还对我们的远程开发扩展进行了一些更新,这些扩展允许您使用开发容器、远程计算机或 WSL 作为功能齐全的开发环境。

WSL 和开发容器

我们收到了您关于 Remote - WSLRemote - Containers 扩展名称的反馈。我们希望使用 Remote 来表示您是在“远程”或“单独”的 WSL 发行版或开发容器中进行开发,而不是传统的本地开发。但是,这与许多人使用的“远程”用法不同,并且可能会引起混淆(例如,我的本地计算机上的开发容器?)。

我们更新了这些扩展的命名和产品内命令,使其更加清晰,将其重命名为 WSL开发容器。诸如 Marketplace 中的扩展标识符和文档之类的链接保持不变,因此您不应该看到当前对这两个扩展的使用发生中断。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

远程隧道

如上所述,您可以使用 Remote - Tunnels 扩展通过安全隧道连接到远程计算机,而无需 SSH。我们将该扩展从“远程服务器”重命名为“Remote - Tunnels”,因为我们认为这更清楚地表明了其行为(该扩展毕竟用于通过安全隧道在远程计算机上进行开发!)。

Remote - Tunnels extension in the Marketplace

结束语 – 谢谢!

多年来,我们收到了您对远程体验的反馈,最近还收到了关于 VS Code 服务器的反馈 – 非常感谢您分享继续塑造我们产品体验的想法。我们很高兴看到您如何使用我们最新的远程功能,并期待您的反馈!

如果您想更深入地了解本博客中描述的工具,我们创建了一个关于 Remote - Tunnels 扩展的主题,同时更新了 VS Code Servercode CLI 文档,以反映最新的更改。

请随时在我们的 vscode-remote-release GitHub 存储库中提交功能请求或错误报告,或者您也可以在 Twitter 上向我们发送您的想法 @code

祝您编码愉快!

Brigit Murtaugh, @BrigitMurtaugh