更棒的遠端開發體驗

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

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

您可能沒有注意到，但 VS 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 desktop 或 web 用戶端針對您選擇的任何機器進行開發，而無需設定 SSH 或 HTTPS 的麻煩 (雖然如果您願意，也可以這樣做 😊)。

您有兩個很棒的選項可以從 VS Code 連線到遠端機器的通道

• 使用新的、增強的 code CLI。
• 直接從 VS Code UI 啟用通道。

我們將在以下章節中探討這兩個選項。

增強的 code CLI

當我們發布 VS Code Server 時，我們提到了我們將其整合到 code CLI 中的長期願景。我們現在已經實現了這一點，並且也提供獨立安裝，以防您在 VM 或鎖定的機器上工作，而無法安裝 VS Code Desktop。

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

注意：如果您在 VS Code Server 的私人預覽期間使用獨立的 code-server CLI，您現在應該改用最新的 code CLI (透過最新的 VS Code Desktop 或獨立下載)。

1. 在您想要在本機 VS Code 用戶端中針對其進行開發的遠端機器上安裝 code CLI。這可以是遠端桌面、VM，甚至是 Windows Subsystem for Linux (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 時，系統會提示您在 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) 並執行命令遠端通道：開啟遠端通道存取...。

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

在您選擇的用戶端中，您可以從上面的通知中開啟 vscode.dev 連結並開始撰寫程式碼！

透過遠端通道連線

Remote - Tunnels 擴充功能管理本機和遠端機器之間的這些安全通道。您透過 code CLI 或 VS Code UI 開啟的 vscode.dev 執行個體都預先安裝了 Remote Tunnels 擴充功能。

如果您已經在 VS Code 用戶端 (桌面版或網頁版) 中工作，並且想要連線到遠端通道，您可以直接安裝和使用 Remote - Tunnels 擴充功能。安裝擴充功能後，開啟命令面板 (F1) 並執行命令遠端通道：連線到通道。您將能夠連線到任何具有活動通道的遠端機器

您也可以在遠端瀏覽器中檢視您的遠端機器，您可以透過命令遠端瀏覽器：聚焦於遠端檢視開啟遠端瀏覽器

移除通道或機器

如果您想要停止透過 CLI 執行的通道，請使用 Ctrl + C 來結束活動連線。如果您已透過 VS Code UI 啟用通道，請執行命令遠端通道：關閉遠端通道存取...。

您可以透過在該機器上執行 code tunnel unregister 來移除機器與通道的關聯。在 VS Code 中，選取遠端瀏覽器檢視，在您想要移除的機器上按一下滑鼠右鍵，然後選取取消註冊。

遠端開發擴充功能

除了通道和 code CLI 的更新之外，我們還對我們的 遠端開發 擴充功能進行了一些更新，這些擴充功能可讓您使用開發容器、遠端機器或 WSL 作為功能完善的開發環境。

WSL 和開發容器

我們聽到了您關於 Remote - WSL 和 Remote - Containers 擴充功能名稱的意見回饋。我們原本希望 Remote 表示您是在「遠端」或「獨立」的 WSL 發行版或開發容器中開發，而不是傳統的本機開發。但是，這與許多人使用的「遠端」用法不同，並且可能會造成混淆 (例如，開發容器是否在我的本機機器上？)。

我們更新了這些擴充功能的命名和產品內命令，使其更清晰，將它們重新命名為 WSL 和 Dev Containers。 Marketplace 和文件中的擴充功能識別碼等連結保持不變，因此您不應在目前使用這兩個擴充功能時看到任何中斷。

遠端通道

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