VS Code For Web 深入淺出 -- 導(dǎo)讀篇

時間：2023-08-29 11:06:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-29 11:06:01 來源：網(wǎng)站運(yùn)營

VS Code For Web 深入淺出 -- 導(dǎo)讀篇：下一代 IDE 的形態(tài)究竟是什么呢？VS Code For Web 試圖回答這個問題。

背景

眾所周知，VS Code 是當(dāng)前工業(yè)界最優(yōu)秀的代碼編輯器之一。它由《設(shè)計模式》的作者 Erich Gamma 領(lǐng)導(dǎo)開發(fā)，因此，它的設(shè)計架構(gòu)在很多地方十分精妙，近些年已經(jīng)成為了各家競相模仿學(xué)習(xí)的對象。

盡管 VSCode 作為桌面端應(yīng)用十分優(yōu)秀，但由于它基于 Electron，相當(dāng)于在 Chromium 外套了一層殼，使得它的打包體積非常大，且無法直接安裝在云端環(huán)境中，這就導(dǎo)致了它的使用場景非常有限。

2019 年，微軟在 PyCon 2019 大會上發(fā)布了 VSCode Remote 擴(kuò)展，支持了遠(yuǎn)程開發(fā)，這個擴(kuò)展的出現(xiàn)，使得 VSCode 成為了一款真正的跨平臺 IDE，不再局限于本地開發(fā)，可以通過 SSH 連接到遠(yuǎn)程服務(wù)器，然后在遠(yuǎn)程服務(wù)器上開發(fā)。

2020 年，Github Codespaces 又將 Web IDE 的進(jìn)展向前邁進(jìn)了一步，它允許用戶訪問 Github 上托管的所有項目來直接進(jìn)行編輯與提交，而無需自己搭建服務(wù)器，實(shí)現(xiàn)了一個全托管的遠(yuǎn)程開發(fā)解決方案。但微軟當(dāng)時并未將其 Server 部分開源，由 Github 集中運(yùn)營。

而在最近的 2022 年 7 月，微軟公開并發(fā)布了 private preview 版本的 VS Code Server。這是一個可私有化的，可以在遠(yuǎn)程開發(fā)機(jī)器上運(yùn)行的獨(dú)立服務(wù)端。與 Github Codespaces 相同，它允許用戶直接通過 URL，在瀏覽器中安全地鏈接到遠(yuǎn)程開發(fā)機(jī)，且同時支持了 HTTP 與 Web Socket 協(xié)議。在此過程中不需要進(jìn)行任何前期的 SSH 或 HTTPS 設(shè)置。

官方基于此制作了基于 VS Code Server 的 Web IDE，可以直接通過瀏覽器訪問 https://vscode.dev/ 進(jìn)行體驗(yàn)?？梢灶A(yù)見，這就是下一代 IDE 的形態(tài)，Serverless, and Run Anywhere。

注：本文基于 VSCode v1.71 版本。

VS Code For Web 代碼架構(gòu)

注意，在了解 VS Code For Web 的架構(gòu)之前，我們最好對 VS Code 的組織架構(gòu)有一定的了解。（詳細(xì)內(nèi)容可自行參考 VSCode 的官方文檔。）

從設(shè)計上說，VS Code 是一個多進(jìn)程架構(gòu)的應(yīng)用程序，它主要由客戶端與服務(wù)端 2 個應(yīng)用程序組成。

其中，客戶端是一個 Electron 應(yīng)用程序，它負(fù)責(zé) UI 的渲染，以及與服務(wù)端的通信。而服務(wù)端則是一個 Node.js 應(yīng)用程序，它負(fù)責(zé)處理客戶端的請求，以及提供一些基礎(chǔ)的功能。

而在 VS Code For Web 中，得益于使用TS語言，其客戶端可以幾乎無縫擴(kuò)展到瀏覽器中。因此，主要的改動點(diǎn)在于 VS Code Server 的實(shí)現(xiàn)。

在 VSCode 的設(shè)計中， VS Code Server 是 VSCode 服務(wù)端的一個子集，它只實(shí)現(xiàn)了 VSCode 的本地服務(wù)端的一部分功能，它的主要目的是為了提供一個更輕量級的服務(wù)端，以便于在云端環(huán)境中運(yùn)行。

VS Code For Web 的架構(gòu)分為了兩個部分：

1. Web Workbench，即 VSCode 的 Web 客戶端，此處為瀏覽器各項服務(wù)配置的入口點(diǎn)，處理如何與后端建聯(lián)，解析資源，以及加載 WebView 等。
2. Remote Server，為客戶端提供 Terminal，F(xiàn)ile system，Debugger 等服務(wù)的訪問能力。

接下來，我們可以對照著 VSCode 的主要源碼 src/vs，來直觀的理解代碼架構(gòu)。







其中，base 文件夾提供通用的基礎(chǔ)依賴能力，如通用 UI 組件庫，woker通信能力，IPC 通信能力等。platform 文件夾更上一層，提供依賴注入能力、以及剪切板、文件處理等基礎(chǔ)能力Service。editor 文件夾即為代碼編輯器 monaco，處理核心編輯區(qū)相關(guān)的內(nèi)容。最外層的 workbench 文件夾則負(fù)責(zé)view層除了編輯器之外的工作區(qū)的UI布局與渲染。

而剩余部分即為啟動客戶端的支持能力。其中，code 文件夾為客戶端啟動的入口，包括從web端啟動與桌面端啟動。而 server 文件夾則是 VS Code Server 的主要位置，負(fù)責(zé)運(yùn)行服務(wù)端程序的 entrypoint。

其代碼組織如下圖所示：







從架構(gòu)設(shè)計上可以看出，VSCode 采用從 view 到 infrastructure 的分層思想，使得數(shù)據(jù)與事件流單向流動。

從這里也可以看到，VSCode 的客戶端與服務(wù)端采用了同構(gòu)的設(shè)計思路，使得客戶端與服務(wù)端提供服務(wù)形式的切換變得更加容易，從架構(gòu)上就兼顧到了 Web IDE 的可行性。

VSCode For Web 職責(zé)分工

VSCode Server 與客戶端運(yùn)行的 VSCode 的架構(gòu)職責(zé)區(qū)分如下圖所示：







我們知道 VSCode 是一個多進(jìn)程項目，從這張圖中我們可以看出，VSCode 將幾乎所有的運(yùn)算進(jìn)程都交給了服務(wù)端。由于機(jī)能的限制，實(shí)際上，屬于客戶端處理的除了主進(jìn)程外，只有 UI 繪制相關(guān)的進(jìn)程，以及與插件服務(wù)與本地服務(wù)間的通信進(jìn)程（語言相關(guān)的service除外，為了在web端也能擁有不錯的開發(fā)體驗(yàn)，language server 是使用了worker thread 旁路執(zhí)行的）。

因此VSCode Server 除了負(fù)責(zé)啟動服務(wù)的 Running App 進(jìn)程外，還需要處理如 Terminal，F(xiàn)ile system，Debugger、Search 等等進(jìn)程。它們的生命周期都是由 VSCode Server 管理的。

結(jié)語

本篇文章為導(dǎo)讀篇，主要介紹了 VSCode For Web 的設(shè)計背景，并簡單介紹了 VSCode For Web 的架構(gòu)設(shè)計，以及前后端的職責(zé)分工。在下一篇文章中，我們將會著重介紹 VSCode For Web 的前后端通信機(jī)制。