摘要： IDE新時代！

作者：SHUHARI 的博客

原文：Visual Studio Code 遠(yuǎn)程開發(fā)探秘

Fundebug按照原文要求轉(zhuǎn)載，版權(quán)歸原作者所有。

在以前的文章 有趣的項目 - 在瀏覽器中運行 Visual Studio Code， 我介紹過 Coder 開發(fā)團(tuán)隊將 Visual Studio Code 搬到瀏覽器里的嘗試。這是一個有趣的項目，不過沒有想到的是，這之后不久微軟官方就推出了 VSCode 的遠(yuǎn)程開發(fā)擴(kuò)展，這簡直是官方逼死同人的節(jié)奏。從 Coder 官網(wǎng) 的信息來看，他們似乎已將精力主要放到企業(yè)版本，這應(yīng)該算一個生不逢時的產(chǎn)品吧。今天我們來介紹一下微軟自己基于 VSCode 的遠(yuǎn)程開發(fā)平臺。

從原理上講，VSCode 遠(yuǎn)程開發(fā)擴(kuò)展相當(dāng)于把開發(fā)者自己機器上的 VSCode 原樣拷貝到作為目標(biāo)機器（Remote Host）上，以服務(wù)的形式運行，而本地的 VSCode 作為客戶端，兩者之間通過遠(yuǎn)程通訊協(xié)議彼此協(xié)調(diào)合作，實際上的開發(fā)工作主要是在服務(wù)端完成的。這個架構(gòu)特別之處在于，我們?nèi)粘Ｋ褂玫臄U(kuò)展也被分成兩個陣營：和界面定制相關(guān)的部分，主要包括樣式、主題、圖標(biāo)等等在客戶端運行；而與開發(fā)相關(guān)的大部分?jǐn)U展則在服務(wù)端運行。后面在實際操作的部分，我們會看到界面上相應(yīng)的變化。

目前，VSCode 遠(yuǎn)程開發(fā)支持下列三種主要模式：

Remote SSH：通過 SSH 連接到 Linux 服務(wù)器；

Remote Container：連接到 Docker 容器；

Remote WSL：連接到已安裝的 WSL 環(huán)境。

本文主要介紹第一種，基于 SSH 的方式。容器方式除了初始化配置方面有一些區(qū)別以外，具體使用上基本相同。至于 WSL，按照目前的發(fā)展方向，可以認(rèn)為它和從虛擬機運行 Linux 沒什么差別，所以我不會特別關(guān)注它。想要使用該方式的同學(xué)可以參考 官方文檔。

為了使用 VSCode Remote SSH，首先請確認(rèn)你了解它的一些限制與前提條件。

Remote SSH 只支持 Linux 作為服務(wù)器，且必須是 64 位版本。這可能是因為 Linux 才有完整的 SSH 服務(wù)器支持，而 Windows 或 MacOS 都需要一些額外的工作。鑒于大部分生產(chǎn)服務(wù)器都應(yīng)該是 Linux，相信這個限制對大多數(shù)同學(xué)不成問題；

對于 Linux 的具體類型，官方明確支持的包括 Debian、RHEL/CentOS 與 Ubuntu 三大發(fā)行版。其他很多 Linux 版本也應(yīng)該可以工作，但并不保證，也有一些比較少見的版本不受支持（主要是因為 glibc 等基礎(chǔ)環(huán)境的支持問題）。另外，CentOS 最好是 7.x 以上，6.x 版本通常需要一定的調(diào)整才能工作（參考: Updating glibc and libstdc++ on RHEL / CentOS 6）；

當(dāng)然，要使用 Container 或 WSL 方式，在機器上必須有 Docker 或者 WSL 的基礎(chǔ)環(huán)境；

本地機器上應(yīng)該有 SSH 命令行客戶端。對于 Win10，只要不是補丁太舊的話，應(yīng)該已經(jīng)內(nèi)置了 OpenSSH。Putty 目前是不受支持的。

確認(rèn)前提條件已滿足，接下來應(yīng)該在自己的 VSCode 中安裝遠(yuǎn)程開發(fā)擴(kuò)展。

遠(yuǎn)程開發(fā)擴(kuò)展的名稱是 Remote Development，它實際上是一個擴(kuò)展包（Extension Pack），由 Remote-SSH、Remote-Containers、Remote-WSL 以及 Python 四個擴(kuò)展組合而成，除了 Python 主要用于功能支持外，其他三個擴(kuò)展功能是很明顯的。目前該擴(kuò)展仍然處于預(yù)覽狀態(tài)，不過已經(jīng)可以安裝到 VSCode 正式版了（若不能安裝的話，請確認(rèn) VSCode 版本高于 1.35）。

要通過 SSH 連接服務(wù)器，我們可以使用用戶名/密碼或者 SSH Key。對于日常使用的環(huán)境來說，基于 SSH Key 的方式盡管初始配置要麻煩一些，但是一勞永逸。

生成 SSH Key 并分發(fā)到遠(yuǎn)程機器是服務(wù)器運維的常規(guī)操作，具體過程就不再贅述了。官方文檔也有一個比較詳細(xì)的 步驟指導(dǎo)，需要的同學(xué)可以參考。

這里補充說明一點，對于 Windows 客戶端，生成的 Key 通常位于 %USERPROFILE%.ssh 目錄下。在后續(xù)的配置部分我們會用到這個目錄。

配置好 SSH Key 就可以連接到服務(wù)器了。最直接的方法是通過命令面板，選擇命令 Remote-SSH: Connect to Host，然后按照提示輸入格式為 user@host 的服務(wù)器地址。

但是每次打開環(huán)境都要手工輸入地址顯然是很不人道的，于是遠(yuǎn)程開發(fā)擴(kuò)展為我們提供了保存服務(wù)器配置的方式。調(diào)用該方式一般也是通過命令面板：Remote-SSH: Open Configuration File。

該命令又會進(jìn)一步提示我們選擇哪個配置文件來編輯。

你可以認(rèn)為上圖中兩個文件分別代表機器級別和用戶級別的配置，通常應(yīng)該選擇用戶級別配置。打開以后會看到，它已經(jīng)為我們提供了一個默認(rèn)模板。我們按格式添加服務(wù)器記錄，并且額外提供一個證書文件的位置參數(shù)。對于服務(wù)器地址和用戶名，請按你的實際情況輸入：

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
# Host alias
#    HostName hostname
#    User user

Host test-server
    HostName <192.168.207.130>
    User 
    IdentityFile C:/Users//.ssh/id_rsa

在安裝完遠(yuǎn)程開發(fā)擴(kuò)展之后，我們會注意到在活動欄下邊多了一個遠(yuǎn)程圖標(biāo)，點擊該圖標(biāo)會出現(xiàn)遠(yuǎn)程視圖，其中包含了我們已經(jīng)定義過的服務(wù)器。在服務(wù)器上右鍵點擊，選擇 Connect to Host in Current/New Window，就會在當(dāng)前窗口或新窗口打開到服務(wù)器的連接，讓你開始工作。

第一次連接到遠(yuǎn)程服務(wù)器時的初始化工作需要消耗一段時間，以后再次打開就會快很多。請耐心等待服務(wù)器初始化完成，如果一切正常，你就會看到 VSCode 轉(zhuǎn)變?yōu)檫h(yuǎn)程開發(fā)模式。

當(dāng)工作環(huán)境處于遠(yuǎn)程模式的時候，你會注意到和本地開發(fā)的一些不同之處。

首先，狀態(tài)欄左邊會用綠色的文字明確指示當(dāng)前處于遠(yuǎn)程模式（使用其他主題的話顏色可能會有所不同）：

其次，當(dāng)你使用“打開文件”或“打開目錄”命令的時候，也會發(fā)現(xiàn)現(xiàn)在顯示的已經(jīng)不是操作系統(tǒng)的本地文件對話框，而是另外一個不同的界面，用于選擇遠(yuǎn)程服務(wù)器上的路徑：

此外，你還應(yīng)該注意以下擴(kuò)展視圖的變化。

從圖中我們可以看到，遠(yuǎn)程開發(fā)擴(kuò)展以及一些界面主題是保留在本地 VSCode 的，而用于開發(fā)的擴(kuò)展則在本地被禁用了。可能是出于性能的考慮，這些擴(kuò)展并沒有自動安裝到遠(yuǎn)程服務(wù)器上，要在遠(yuǎn)端開啟這些擴(kuò)展的話，需要在圖中對特定的擴(kuò)展選擇 Install on SSH 命令。對于已經(jīng)安裝到遠(yuǎn)端的擴(kuò)展，則會顯示提示信息 Extension is enabled on SSH and disabled locally。

接下來的操作和普通的本地開發(fā)就沒什么差別了。你可以打開目錄、編輯文件、執(zhí)行程序，等等。但需要注意的是，現(xiàn)在幾乎所有操作幕后都是在服務(wù)器上完成的，如果你還下意識地以為是本地操作的話，有時候就難免有點混亂，所以還是應(yīng)該堅持一段時間來適應(yīng)。

還有一點補充建議：如果服務(wù)端是 Linux 而客戶端是 Windows，并且你將要打開的是一個 Git 倉庫的話，請考慮在 Git 中配置 autocrlf = false，，以避免不同平臺對換行的處理差異導(dǎo)致莫名其妙的變更問題。

最近我錄制了一個課程 Visual Studio Code 全景學(xué)習(xí)，其中對設(shè)置的結(jié)構(gòu)有專門的介紹。VSCode 的設(shè)置是一個非常靈活、但又相當(dāng)復(fù)雜的層次結(jié)構(gòu)，在遠(yuǎn)程開發(fā)的背景下，又多了一個遠(yuǎn)程設(shè)置的來源，所以結(jié)構(gòu)是更加復(fù)雜了。

在默認(rèn)情況下，本地的 VSCode 用戶配置會自動應(yīng)用到遠(yuǎn)程服務(wù)器環(huán)境，不需要我們做額外的工作。但客戶端和服務(wù)器通常是不同的操作系統(tǒng)，它們之間難免有一些差異，所以有時候還是要對遠(yuǎn)程環(huán)境多帶帶作一些配置。為此，VSCode 提供了一個命令 Open Remote Settings 專門用來編輯遠(yuǎn)程配置。和其他命令一樣，你可以從命令面板（Command Palette）調(diào)用它。

另外，遠(yuǎn)程開發(fā)也注冊了一些自己特有的配置信息。其中最主要的可能是 remote.extensionKind。我們在本文前面的原理部分講述過，為了支持遠(yuǎn)程開發(fā)模式，VSCode 會把擴(kuò)展分為本地和遠(yuǎn)程兩種運行類型。一般來說，VSCode 會自動判斷擴(kuò)展應(yīng)該放在哪個位置，但也有一些情況可能不太好判斷，所以 VSCode 允許我們自行配置它。

{
    "remote.extensionKind": {
        "ext1": "ui",
        "ext2": "workspace"
    }
}

對于每個擴(kuò)展，我們可以把它設(shè)置為 ui 或者 workspace，分別代表在本地/服務(wù)器上啟用。這樣，VSCode 在啟動遠(yuǎn)程模式時會對擴(kuò)展做出合適的處理。如果還覺得有點糊涂的話，建議回頭看看文章開頭的架構(gòu)圖。

在遠(yuǎn)程模式下工作時，幾乎所有開發(fā)相關(guān)的操作都是在遠(yuǎn)程服務(wù)器上完成的。這也包括了終端（Terminal）。你可以嘗試在終端輸入一些命令，從提示和結(jié)果都能發(fā)現(xiàn)，這并不是客戶端的 Windows Cmd，而是一個真實的 Linux Terminal。另外，我們還會發(fā)現(xiàn) VSCode 會在遠(yuǎn)程服務(wù)器的用戶目錄下建立一個 .vscode-server 目錄，該目錄實際上就是一個完整的 VSCode 程序（那個很長的中綴猜想是用來區(qū)分不同的session，但是沒有具體驗證過）。所有在服務(wù)端開啟的開發(fā)擴(kuò)展也會自動拷貝到相應(yīng)的子目錄下。

如果你希望了解遠(yuǎn)程模式的一些工作內(nèi)幕，那么輸出面板有一個 Remote-SSH 視圖能為你提供一些信息。這個輸出顯示的內(nèi)容還是比較有限，但是也能看到啟動服務(wù)和調(diào)用命令的一些細(xì)節(jié)。此外，輸出視圖的 Log (Remote Server) 和 Log (Remote Extension Host) 也會顯示服務(wù)器相關(guān)的一些日志記錄。

我個人非常希望從源代碼級別了解遠(yuǎn)程開發(fā)工作的一些細(xì)節(jié)，但很可惜，目前微軟官方的代碼庫中只有一些文檔和問題模板，并未開放遠(yuǎn)程開發(fā)擴(kuò)展的源碼。其實仔細(xì)研究遠(yuǎn)程開發(fā)的一些細(xì)節(jié)可以認(rèn)識到，遠(yuǎn)程開發(fā)在很多方面是需要和 VSCode 的核心架構(gòu)深度綁定的，因此有很大可能，該擴(kuò)展會在功能逐漸穩(wěn)定以后合并到 VSCode 的主體代碼，不再作為多帶帶的擴(kuò)展出現(xiàn)。當(dāng)然這是我個人的一家之言，不妨姑妄聽之。

VSCode 遠(yuǎn)程開發(fā)目前還在預(yù)覽狀態(tài)，并且它對 VSCode 內(nèi)部的一些架構(gòu)變動也比較大，可能仍然存在不少 bug，對于第三方擴(kuò)展也可能會有一些兼容性問題。如果你在使用中發(fā)現(xiàn)有問題的話，可以到 遠(yuǎn)程開發(fā) Issue 查找或報告，或者參考官方文檔中的 Troubleshooting 以解決一些常見問題。

如果你自己是擴(kuò)展開發(fā)者的話，需要注意的是在遠(yuǎn)程模式下過去的某些做法可能是會出問題的，特別是一些直接訪問本地功能的原生 nodejs 庫。微軟也列出了容易導(dǎo)致問題的一些常見場景，以及建議的解決方法，請參考閱讀：Supporting Remote Development。

按照微軟官方的設(shè)想，以及一些開發(fā)者的使用經(jīng)驗，VSCode 遠(yuǎn)程開發(fā)主要用于跨平臺開發(fā)、統(tǒng)一開發(fā)環(huán)境、沙盒模擬等場景。對于一般性個人開發(fā)，我的感覺是通過 SSH 管理比本地開發(fā)還是反應(yīng)略慢，失去了流暢的感覺，并且我個人對于上述場景沒有特別強烈的要求，因此遠(yuǎn)程開發(fā)對我來說，至少在目前意義并不算大。但需要承認(rèn)的是，這種方式帶來了很大的想象空間，也很有可能在未來會看到其他更加有用的玩法，所以還是一個值得關(guān)注的方向。

然而從架構(gòu)的角度講，我對這個擴(kuò)展是有一些擔(dān)心的。主要的問題在于復(fù)雜性。我看到的主要問題包括：

目前 VSCode 的設(shè)置層次已經(jīng)相當(dāng)復(fù)雜了，并且從官方 Issue 可以感受到，由于這種架構(gòu)分支太多、難于管理，某些問題處理起來應(yīng)該是比較棘手，甚至微軟的開發(fā)者也無法給出明確的回答。而遠(yuǎn)程開發(fā)模式還會讓這個結(jié)構(gòu)更加復(fù)雜，可謂雪上加霜；

對于擴(kuò)展的本地/遠(yuǎn)程分類，也給擴(kuò)展管理帶來了額外的復(fù)雜性，并且不夠直觀；

它也給擴(kuò)展開發(fā)者帶來了額外的負(fù)擔(dān)，一些過去習(xí)以為常的用法在遠(yuǎn)程模式下可能徹底無法工作了，且需要這些開發(fā)者去了解一些瑣碎的技術(shù)細(xì)節(jié)。提高擴(kuò)展開發(fā)者的門檻對于 VSCode 繁榮的生態(tài)可能是不利的。

從長遠(yuǎn)來說，遠(yuǎn)程開發(fā)功能是不是獨立成一個多帶帶的產(chǎn)品更好呢？呃——其實我也不知道。

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團(tuán)社等眾多品牌企業(yè)。歡迎大家免費試用！