摘要： IDE新時(shí)代！

作者：SHUHARI 的博客

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

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

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

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

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

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

Remote Container：連接到 Docker 容器；

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

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

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

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

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

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

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

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

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

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

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

這里補(bǔ)充說(shuō)明一點(diǎn)，對(duì)于 Windows 客戶(hù)端，生成的 Key 通常位于 %USERPROFILE%.ssh 目錄下。在后續(xù)的配置部分我們會(huì)用到這個(gè)目錄。

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

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

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

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

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

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

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

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

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

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

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

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

還有一點(diǎn)補(bǔ)充建議：如果服務(wù)端是 Linux 而客戶(hù)端是 Windows，并且你將要打開(kāi)的是一個(gè) Git 倉(cāng)庫(kù)的話(huà)，請(qǐng)考慮在 Git 中配置 autocrlf = false，，以避免不同平臺(tái)對(duì)換行的處理差異導(dǎo)致莫名其妙的變更問(wèn)題。

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

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

另外，遠(yuǎn)程開(kāi)發(fā)也注冊(cè)了一些自己特有的配置信息。其中最主要的可能是 remote.extensionKind。我們?cè)诒疚那懊娴脑聿糠种v述過(guò)，為了支持遠(yuǎn)程開(kāi)發(fā)模式，VSCode 會(huì)把擴(kuò)展分為本地和遠(yuǎn)程兩種運(yùn)行類(lèi)型。一般來(lái)說(shuō)，VSCode 會(huì)自動(dòng)判斷擴(kuò)展應(yīng)該放在哪個(gè)位置，但也有一些情況可能不太好判斷，所以 VSCode 允許我們自行配置它。

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

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

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

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

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

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

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

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

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

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

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

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

從長(zhǎng)遠(yuǎn)來(lái)說(shuō)，遠(yuǎn)程開(kāi)發(fā)功能是不是獨(dú)立成一個(gè)多帶帶的產(chǎn)品更好呢？呃——其實(shí)我也不知道。

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