遠端開發更勝一籌

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

Visual Studio Code 的核心是一個程式碼編輯器，它透過我們的遠端開發體驗與其他環境整合，變得更加強大和靈活。

您可能沒有意識到，VS Code 有一個內建的命令列介面 (CLI)，它允許您控制如何啟動和管理編輯器——您可以透過命令列選項開啟檔案、安裝擴充套件和輸出診斷資訊。

CLI 在使用 VS Code 桌面版的流程中非常有用，但存在一個空白：您無法使用它啟動遠端例項。因此，我們希望透過將本地和遠端更緊密地結合在一起來彌補這一空白，使 CLI 更加強大。

今天，我們很高興分享我們增強的 code CLI，它允許您從 VS Code 桌面版或 vscode.dev 啟動 VS Code 並遠端連線到機器。更新後的 CLI 內建在最新的 VS Code 版本中，也可用於獨立安裝，因此您可以建立與任何計算機的安全連線並遠端連線到它，即使您無法在其上安裝 VS Code 桌面版。

除了新的 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 桌面版的 VM 或鎖定機器上工作。

以下是安裝 code CLI 並使用它建立安全隧道的步驟。如果您嘗試過 VS Code Server 的私有預覽版，這些步驟將非常相似。

注意： 如果您在 VS Code Server 私有預覽期間使用的是獨立 code-server CLI，您現在應該改用最新的 code CLI（透過最新的 VS Code 桌面版或獨立下載）。

1. 在您想要在本地 VS Code 客戶端中進行開發的遠端機器上安裝 code CLI。這可能是一臺遠端桌面、VM，甚至是 適用於 Linux 的 Windows 子系統 (WSL) 發行版。

   CLI 會自動包含在您現有的 VS Code 安裝中——無需額外設定。如果您沒有安裝 VS Code 或者無法在遠端機器上安裝它，您可以透過下載頁面上的獨立安裝獲取 CLI。

   

   注意： 如果您使用的是獨立安裝，以下部分中的命令將以 ./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 帳戶選單中，選擇 **Turn on Remote Tunnel Access…**（開啟遠端隧道訪問...）選項，如下圖所示。您也可以開啟命令面板 (F1) 並執行命令 **Remote Tunnels: Turn on Remote Tunnel Access...**。

系統會提示您登入 GitHub。登入後，此遠端機器上將啟動一個隧道，您將能夠連線到它。

在您選擇的客戶端中，您可以從上面的通知中開啟 vscode.dev 連結並開始編碼！

透過遠端隧道連線

Remote - Tunnels 擴充套件管理本地機器和遠端機器之間的這些安全隧道。您透過 code CLI 或 VS Code UI 開啟的 vscode.dev 例項預裝了 Remote Tunnels 擴充套件。

如果您已經在 VS Code 客戶端（桌面或 Web）中工作並希望連線到遠端隧道，您可以直接安裝和使用 Remote - Tunnels 擴充套件。安裝擴充套件後，開啟命令面板 (F1) 並執行命令 **Remote Tunnels: Connect to Tunnel**。您將能夠連線到任何具有活動隧道的遠端機器。

您還可以在遠端資源管理器中檢視您的遠端機器，您可以透過命令 **Remote Explorer: Focus on Remote View** 開啟它。

移除隧道或機器

如果您想停止透過 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 - WSL** 和 **Remote - Containers** 副檔名稱的反饋。我們希望 Remote 表示您正在“遠端”或“單獨”的 WSL 發行版或開發容器中進行開發，而不是傳統的本地開發。然而，這種“遠端”用法與許多人使用的不同，可能會引起混淆（例如，Dev Container 是在我本地機器上嗎？）。

我們更新了這些擴充套件中的命名和產品內命令以使其更清晰，將它們重新命名為 WSL 和 Dev Containers。Marketplace 中的擴充套件識別符號和文件等連結保持不變，因此您當前使用這兩個擴充套件不應出現中斷。

Remote Tunnels

如上所述，您可以使用 Remote - Tunnels 擴充套件透過安全隧道連線到遠端機器，而無需 SSH。我們將副檔名稱從 "Remote Server" 重新命名為 "Remote - Tunnels"，因為我們相信這更清楚地表明瞭它的行為（畢竟該擴充套件用於透過安全隧道在遠端機器上進行開發！）。

結語——感謝您！

多年來，我們聽取了您對遠端體驗的反饋，最近對 VS Code Server 的反饋——我們非常感謝您分享這些繼續塑造我們產品體驗的想法。我們很高興看到您如何使用我們最新的遠端功能並期待您的反饋！

如果您想深入瞭解此部落格中描述的工具，我們建立了關於 Remote - Tunnels 擴充套件的主題，並更新了 VS Code Server 和 code CLI 文件以反映最新更改。

請隨時在我們的 vscode-remote-release GitHub 儲存庫中提交功能請求或錯誤，或者您可以透過 Twitter @code 告訴我們您的想法。

編碼愉快！

Brigit Murtaugh, @BrigitMurtaugh