WebIDE 踩坑

调研了市面上其他厂商做的IDE，有些是基于electron或NW.js从头开始构建的，成本较高。还有很多是基于VSCode源码定制的，后来了解到Eclipse Theia这个框架，发现样式和功能与VSCode差不多，而且也部分支持VSCode的插件，最主要是能够通过扩展的形式去丰富IDE的视图功能，比VSCode修改源码更加好用。

主流 WebIDE 对比

  • Monaco Editor。Monaco Editor 是在 VSCode 项目中开发过程中抽离出来的纯编辑器部分，他们很大一部分的代码（monaco-editor-core）都是共用的，所以 monaco 和 VSCode 在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco 基于浏览器，而 VSCode 基于 electron ，所以功能上 monaco 相对于其他 IDE 缺乏较多重要功能，都需要自己实现。

  • VSCode。运行在VSCode 也发现在云计算的背景下，对 WebIDE 的呼声很高，就在最近 VSCode 也支持了 WebIDE，采用单项目架构，扩展需要采用插件形式或者直接对源码扩展。

  • Code server。Code server 将 VSCode 在浏览器端跑起来，主要思路是将 VSCode 内部通信替换后成 websocket 通信，然后通过 webpack 将前端依赖的 native 库替换掉。这种实现的好处是可以更大范围的去兼容 vscode 以及 vscode 的插件。

  • Theia IDE。Theia IDE 定位是 WebIDE 开发框架，可以运行在 WEB 端和 electron ，基于它可以很方便的开发业务 WebIDE，提供了两种扩展模型：扩展和插件，并且兼容 VSCode 的插件

技术介绍

Theia效果图：

是不是感觉和VSCode很像，因为 Theia IDE 的 UI层基于 PhosphorJS， 和 VSCode 一样的，Theia 的目标是 Theia 插件 API 大于等于 vscode 插件 API。Theia的架构更具模块化，并且支持更丰富的扩展方式，而且 Theia IDE 先天提供了在Cloud上运行的能力。

扩展方式

Theia IDE 支持两种扩展方式：扩展(Extensions)和插件(Plug-ins)。扩展是编译时期的，安装一个扩展需要重新编译 IDE；插件是运行时的，安装一个插件不需要重新编译；所以安装插件要比安装扩展快。与扩展相比，插件有如下优缺点：

扩展

  • 更强的扩展性。Theia IDE 本身就是由各种扩展组成的。编写扩展具有很强大自定义能力，可以新增、移除或覆盖Tehia IDE 的视图、命令、快捷键、高亮、菜单等功能。
  • 使用 Inversify.js 依赖注入管理扩展。通过 DI 容器处理拓展之间的依赖关系，这就像一个全局公告板，拓展可以去修改上面的内容。

每个 Extension 都是通过 npm 包的形式提供给 Theia Application 集成，导出一个 Inversify.js 模块，模块中往 Theia 定义的扩展点 Contribution 中注入新的服务，以实现扩展。

一个扩展通常包含 FrontendModule 和 BackendModule， 会分别被加载到浏览器端和node端，通过内置的JSON RPC 模块进行前后端通信，像调用本地方法一样调用后端方法。

相对于 VS Code 中 Contribution Points 比较局限，只能做一些基础的配置及使用特定 API 进行有限操作，而 Theia 中定义了大量的 contribution 接口，通过实现 Contribution 类型的接口扩展可以为应用增加很多功能。

插件

  • 代码隔离。作为在单独进程中运行的插件代码，它无法干扰 Theia 核心进程。
  • 可以在运行时加载。无需重新编译 Theia 的完整 IDE，减少编译时间。
  • 简单的 API。插件 API 被封装成一个入口对象，无需学习依赖注入等框架。
  • 插件只能使用预定义的 API。如果某些扩展点没有提供给插件使用的预定义 API，则该扩展点无法被插件扩展。

前端插件和后端插件架构一致，只有运行环境的区别：前端插件运行在前端 Web Worker 进程里，后端插件运行在 Server 端的 node 子进程里。

插件和 IDE 核心功能之间通过进程进行隔离，彼此通过 RPC 协议进行通信。插件和插件之间做了上下文的隔离，同时通过 API 的工厂函数，对 API 的实现做了隔离。

踩坑经历

想要扩展某功能，找不到应该使用哪个扩展点，不知道往哪里注入什么样的服务

Tehia官网：https://theia-ide.org/docs/
Theia社区：https://community.theia-ide.org/
Theia github issues：https://github.com/eclipse-theia/theia/issues
API文档：https://eclipse-theia.github.io/theia/docs/next/globals.html
常用扩展总结：https://www.yuque.com/zhaomenghuan/theia/qalple

@theia/languages 提示已弃用；

强行使用旧版本会报错，不想使用旧版本Theia去兼容启用的 @theia/languages，此路不通。

language-server接入

https://code.visualstudio.com/api/language-extensions/language-server-extension-guide ，未找到具体接入方法，目前找到的了一些 Python 相关的扩展，但是资料并没有写如何接入，正在研究如何接入更合适
Microsoft/vscode-python：https://github.com/Microsoft/vscode-python
Microsoft/python-language-server：https://github.com/Microsoft/python-language-server

按照官方文档，进行插件开发，无法调试和启动

需要引入插件相关扩展，才能使用插件和插件扩展功能

1
2
3
"@theia/plugin-dev": "1.12.0",
"@theia/plugin-ext": "1.12.0",
"@theia/plugin-ext-vscode": "1.12.0",

插件开发：https://github.com/eclipse-theia/theia/blob/master/packages/plugin/README.md
VSCode 和 Theia API对比：https://che-incubator.github.io/vscode-theia-comparator/status.html

Theia直接使用 VSCode 插件

Visual Studio Marketplace：VSCode扩展商店 https://marketplace.visualstudio.com/vscode
Open VSX：Visual Studio Marketplace的开源替代方案 https://github.com/eclipse/openvsx