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

远程开发更胜一筹

2022年12月7日,由 Brigit Murtaugh (@BrigitMurtaugh) 发布

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

Spectrum of remote development options

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

Output of code CLI

CLI 在使用 VS Code 桌面的工作流程中非常有用,但之前存在一个空白:您无法用它启动远程实例。因此,我们希望通过拉近本地和远程的距离来填补这个空白,使 CLI 变得更加强大。

今天,我们很高兴地与大家分享我们增强版的 code CLI,它能让您从 VS Code 桌面版或 vscode.dev 启动 VS Code 并远程连接到一台机器。更新后的 CLI 已内置于最新的 VS Code 版本中,并且也提供独立安装包,因此您可以创建到任何计算机的安全连接并进行远程连接,即使您无法在其上安装 VS Code 桌面版。

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

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

一个工具,隧道连接到任何地方

隧道技术可以安全地将数据从一个网络传输到另一个网络。您可以使用安全隧道,通过 VS Code 桌面版或网页版客户端在您选择的任何机器上进行开发,而无需费力设置 SSH 或 HTTPS(当然,如果您愿意,也可以这样做 😊)。

您有两个很好的选择来从 VS Code 隧道连接到远程机器:

  • 使用新增的、增强版的 code CLI。
  • 直接从 VS Code 用户界面启用隧道。

我们将在以下部分探讨这两种选择。

增强版 code CLI

当我们发布 VS Code Server 时,我们提到了我们的长远愿景,即将其集成到 code CLI 中。我们现在已经实现了这一目标,并且还提供了独立安装包,以防您在无法安装 VS Code 桌面版的虚拟机或受限机器上工作。

以下是安装 code CLI 并用它创建安全隧道的步骤。如果您曾试用过 VS Code Server 的私有预览版,这些步骤会非常相似。

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

  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 时,系统会提示您在一个 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) 并运行 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 客户端(桌面版或网页版)中工作,并希望连接到远程隧道,您可以直接安装并使用 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 和 Dev Containers

我们听取了您关于 Remote - WSLRemote - Containers 扩展名称的反馈。我们原本打算用 Remote 来表示您是在一个“远程”或“分离”的 WSL 发行版或开发容器中进行开发,而不是传统的本地开发。然而,这种对“远程”的用法与许多人的理解不同,并且可能引起混淆(例如,Dev Container 是在我本地机器上吗?)。

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

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

Remote Tunnels

如上所述,您可以使用 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