下一代IDE是什么形态？VSCodeForWeb试图回答这个问题。众所周知，VSCode是业界最好的代码编辑器之一。它是在《设计模式》的作者ErichGamma的领导下开发的。因此它的设计结构在很多地方都非常精巧，成为了近几年各家公司模仿和学习的对象。VSCode作为桌面应用虽然优秀，但是由于它是基于Electron的，相当于在Chromium上加了一层壳，这使得它的打包体积非常大，无法直接安装在云环境中，这就导致了它的使用场景非常有限。2019年，微软在PyCon2019大会上发布了VSCodeRemote扩展，支持远程开发。这个扩展的出现让VSCode成为真正的跨平台IDE，不再局限于本地开发，可以通过SSH连接到远程。服务器，然后在远程服务器上开发。2020年，GithubCodespaces将WebIDE的进程更上一层楼。它允许用户访问托管在Github上的所有项目直接编辑和提交，而无需搭建自己的服务器，实现了一个完全托管的远程开发解决方案。不过当时微软并没有开源它的Server部分，由Github集中运营。就在2022年7月，微软公开并发布了VSCodeServer的私人预览版。这是一个可私有化的独立服务器，可以在远程开发机器上运行。与GithubCodespaces一样，它允许用户在浏览器中直接通过URL安全链接到远程开发机器，同时支持HTTP和WebSocket协议。在此过程中不需要预先设置SSH或HTTPS。官方基于此制作了VSCodeServer-basedWebIDE，您可以直接通过浏览器访问https://vscode.dev/进行体验。可以预见，这就是下一代IDE、Serverless、RunAnywhere的形态。注：本文基于VSCodev1.71版本。VSCodeForWeb代码架构注意，在了解VSCodeForWeb的架构之前，我们最好对VSCode的组织结构有一定的了解。（详见VSCode官方文档）从设计的角度来看，VSCode是一个多进程架构的应用程序，主要由客户端和服务端两个应用程序组成。其中，客户端是一个Electron应用程序，负责渲染UI并与服务端通信。服务器是一个Node.js应用程序，负责处理客户端请求并提供一些基本功能。在VSCodeForWeb中，由于使用了TS语言，其客户端几乎可以无缝扩展到浏览器。因此，主要的变化点是VSCodeServer的实现。在VSCode的设计中，VSCodeServer是VSCodeServer的一个子集。它只实现了VSCode本地服务器的部分功能。它的主要目的是提供一个更轻的服务器，以便于在云环境中访问。VSCodeForWeb的架构分为两部分：WebWorkbench，它是VSCode的web客户端，这里是配置浏览器各种服务的入口，处理如何与后端建立连接、解析资源、加载WebView等。远程服务器，为客户端提供对终端、文件系统和调试器等服务的访问。接下来我们可以通过对比VSCode的主要源码src/vs来直观的了解代码结构。其中base文件夹提供了通用的基础依赖能力，比如通用UI组件库、woker通信能力、IPC通信能力等，platform文件夹更高一层，提供依赖注入能力，以及剪贴板等基础能力和文件处理。editor文件夹是代码编辑器monaco，处理核心编辑区相关的内容。最外层的workbench文件夹负责view层除editor之外的workspace的UI布局和渲染。剩下的部分是启动客户端的支持能力。其中code文件夹是客户端启动的入口，包括web端启动和桌面端启动。server文件夹是VSCodeServer的主要位置，负责运行服务器程序的入口点。其代码组织如下图所示：从架构设计可以看出，VSCode从视图到基础设施都采用了分层的思想，使得数据流和事件流是一个方向流动的。从这里也可以看出，VSCode的客户端和服务端采用了同构的设计思想，这样可以更方便地在客户端和服务端之间切换提供服务，并且从架构上兼顾了WebIDE的可行性。VSCodeForWeb职责划分VSCodeServer和运行在客户端的VSCode架构职责划分如下图所示：我们知道VSCode是一个多进程项目。从这张图我们可以看出VSCode几乎把所有的计算进程都分配给了Server。由于功能限制，实际上除了主进程外，只有UI绘制相关的进程和插件服务与本地服务的通信过程由客户端处理（除了语言相关的服务，为了在web端也有）良好的开发经验，语言服务器是使用工作线程旁路执行的）。因此，除了负责启动服务的RunningApp进程外，VSCodeServer还需要处理Terminal、Filesystem、Debugger、Search等进程，它们的生命周期由VSCodeServer管理。结束语本文是一篇介绍性文章，主要介绍了VSCodeForWeb的设计背景，并简要介绍了VSCodeForWeb的架构设计，以及前后端的职责划分。在下一篇文章中，我们将重点介绍VSCodeForWeb的前后端通信机制。
