关于javascript:VS-Code-For-Web-深入浅出-导读篇

下一代 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 的架构分为了两个局部：

1. Web Workbench，即 VSCode 的 Web 客户端，此处为浏览器各项服务配置的入口点，解决如何与后端建联，解析资源，以及加载 WebView 等。
2. 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 的前后端通信机制。