🚀 在 VS Code 中

更出色的远程开发

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 Server 时,我们提到了我们将其集成到 code CLI 中的长期愿景。我们现在已经实现了这一点,并且我们还使其可用于独立安装,以防您在虚拟机或无法安装 VS Code Desktop 的锁定机器上工作。

以下是在远程计算机上安装 code CLI 并在本地 VS Code 客户端中通过它创建安全隧道的步骤。如果您尝试过 VS Code Server 的私有预览版,则步骤将非常相似。

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

  1. 在您想要在本地 VS Code 客户端中开发的远程计算机上安装 code CLI。这可以是远程桌面、虚拟机,甚至是 Windows Subsystem for Linux (WSL) 发行版。

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

    CLI download section

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

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

    code -h
    

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

    code tunnel -h
    

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

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

    code tunnel
    

    此命令下载并在该机器上启动 VS Code Server,然后为其创建隧道。

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

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

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

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

从 VS Code UI 启用隧道

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

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

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) 并运行命令 Remote Tunnels: Connect to Tunnel。您将能够连接到任何具有活动隧道的远程计算机

List of remote machines in Quick Pick

您还可以在远程资源管理器中查看您的远程计算机,您可以通过命令 Remote Explorer: Focus on Remote View 打开它

List of remote machines in Remote Explorer

删除隧道或计算机

如果您想停止通过 CLI 运行的隧道,请使用 Ctrl + C 结束活动连接。如果您已通过 VS Code UI 启用隧道,请运行命令 Remote Tunnels: Turn off Remote Tunnel Access...

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

远程开发扩展

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

WSL 和开发容器

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

我们更新了这些扩展中的命名和产品内命令,使其更清晰,将它们重命名为 WSLDev Containers。市场和文档中的扩展标识符等链接保持不变,因此您不应看到当前对这两个扩展的使用出现中断。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

远程隧道

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

Remote - Tunnels extension in the Marketplace

结束语 – 感谢您!

多年来,我们听取了您对我们的远程体验以及最近对 VS Code Server 的反馈 – 非常感谢您分享的见解,这些见解不断塑造着我们的产品体验。我们很高兴看到您如何使用我们最新的远程功能以及您的反馈!

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

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

祝您编码愉快!

Brigit Murtaugh,@BrigitMurtaugh