尝试以扩展 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 桌面版的工作流中非常有用,但之前存在一个不足:你无法用它来启动远程实例。因此,我们希望通过拉近本地和远程的距离来弥补这一不足,使 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 桌面版或 Web 客户端在任何你选择的机器上进行开发,而无需费力设置 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 时,系统会提示你登录你的 GitHub 账户,URL 类似于 https://github.com/login/oauth/authorize...。这会向隧道服务进行身份验证,以确保你有权访问正确的远程机器。

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

从 VS Code 用户界面启用隧道功能

如果你在远程机器上安装了 VS Code,也可以选择直接从 VS Code 用户界面创建隧道。如果你已经在 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 用户界面打开的 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 用户界面启用的隧道,请运行 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