下一代 IDE 的形態究竟是什麼呢？VS Code For Web 試圖回答這個問題。 背景 眾所周知，VS Code 是當前工業界最優秀的代碼編輯器之一。它由《設計模式》的作者 Erich Gamma 領導開發，因此，它的設計架構在很多地方十分精妙，近些年已經成為了各家競相模仿學習的對象。 儘管 ...
下一代 IDE 的形態究竟是什麼呢？VS Code For Web 試圖回答這個問題。
背景
眾所周知，VS Code 是當前工業界最優秀的代碼編輯器之一。它由《設計模式》的作者 Erich Gamma 領導開發，因此，它的設計架構在很多地方十分精妙，近些年已經成為了各家競相模仿學習的對象。
儘管 VSCode 作為桌面端應用十分優秀，但由於它基於 Electron，相當於在 Chromium 外套了一層殼，使得它的打包體積非常大，且無法直接安裝在雲端環境中，這就導致了它的使用場景非常有限。
2019 年，微軟在 PyCon 2019 大會上發佈了 VSCode Remote 擴展，支持了遠程開發，這個擴展的出現，使得 VSCode 成為了一款真正的跨平臺 IDE，不再局限於本地開發，可以通過 SSH 連接到遠程伺服器，然後在遠程伺服器上開發。
2020 年，Github Codespaces 又將 Web IDE 的進展向前邁進了一步，它允許用戶訪問 Github 上托管的所有項目來直接進行編輯與提交，而無需自己搭建伺服器，實現了一個全托管的遠程開發解決方案。但微軟當時並未將其 Server 部分開源，由 Github 集中運營。
而在最近的 2022 年 7 月，微軟公開併發布了 private preview 版本的 VS Code Server。這是一個可私有化的，可以在遠程開發機器上運行的獨立服務端。與 Github Codespaces 相同，它允許用戶直接通過 URL，在瀏覽器中安全地鏈接到遠程開發機，且同時支持了 HTTP 與 Web Socket 協議。在此過程中不需要進行任何前期的 SSH 或 HTTPS 設置。
官方基於此製作了基於 VS Code Server 的 Web IDE，可以直接通過瀏覽器訪問 https://vscode.dev/ 進行體驗。可以預見，這就是下一代 IDE 的形態，Serverless, and Run Anywhere。
註：本文基於 VSCode v1.71 版本。
VS Code For Web 代碼架構
註意，在瞭解 VS Code For Web 的架構之前，我們最好對 VS Code 的組織架構有一定的瞭解。（詳細內容可自行參考 VSCode 的官方文檔。）
從設計上說，VS Code 是一個多進程架構的應用程式，它主要由客戶端與服務端 2 個應用程式組成。
其中，客戶端是一個 Electron 應用程式，它負責 UI 的渲染，以及與服務端的通信。而服務端則是一個 Node.js 應用程式，它負責處理客戶端的請求，以及提供一些基礎的功能。
而在 VS Code For Web 中，得益於使用TS語言，其客戶端可以幾乎無縫擴展到瀏覽器中。因此，主要的改動點在於 VS Code Server 的實現。
在 VSCode 的設計中， VS Code Server 是 VSCode 服務端的一個子集，它只實現了 VSCode 的本地服務端的一部分功能，它的主要目的是為了提供一個更輕量級的服務端，以便於在雲端環境中運行。
VS Code For Web 的架構分為了兩個部分：
- Web Workbench，即 VSCode 的 Web 客戶端，此處為瀏覽器各項服務配置的入口點，處理如何與後端建聯，解析資源，以及載入 WebView 等。
- Remote Server，為客戶端提供 Terminal，File system，Debugger 等服務的訪問能力。
接下來，我們可以對照著 VSCode 的主要源碼 src/vs，來直觀的理解代碼架構。
其中，base 文件夾提供通用的基礎依賴能力，如通用 UI 組件庫，woker通信能力，IPC 通信能力等。platform 文件夾更上一層，提供依賴註入能力、以及剪切板、文件處理等基礎能力Service。editor 文件夾即為代碼編輯器 monaco，處理核心編輯區相關的內容。最外層的 workbench 文件夾則負責view層除了編輯器之外的工作區的UI佈局與渲染。
而剩餘部分即為啟動客戶端的支持能力。其中，code 文件夾為客戶端啟動的入口，包括從web端啟動與桌面端啟動。而 server 文件夾則是 VS Code Server 的主要位置，負責運行服務端程式的 entrypoint。
其代碼組織如下圖所示：
從架構設計上可以看出，VSCode 採用從 view 到 infrastructure 的分層思想，使得數據與事件流單向流動。
從這裡也可以看到，VSCode 的客戶端與服務端採用了同構的設計思路，使得客戶端與服務端提供服務形式的切換變得更加容易，從架構上就兼顧到了 Web IDE 的可行性。
VSCode For Web 職責分工
VSCode Server 與客戶端運行的 VSCode 的架構職責區分如下圖所示：
我們知道 VSCode 是一個多進程項目，從這張圖中我們可以看出，VSCode 將幾乎所有的運算進程都交給了服務端。由於機能的限制，實際上，屬於客戶端處理的除了主進程外，只有 UI 繪製相關的進程，以及與插件服務與本地服務間的通信進程（語言相關的service除外，為了在web端也能擁有不錯的開發體驗，language server 是使用了worker thread 旁路執行的）。
因此VSCode Server 除了負責啟動服務的 Running App 進程外，還需要處理如 Terminal，File system，Debugger、Search 等等進程。它們的生命周期都是由 VSCode Server 管理的。
結語
本篇文章為導讀篇，主要介紹了 VSCode For Web 的設計背景，並簡單介紹了 VSCode For Web 的架構設計，以及前後端的職責分工。在下一篇文章中，我們將會著重介紹 VSCode For Web 的前後端通信機制。
