Eclipse Theia 技术揭秘——初识 Theia

概述

自从接触 IDE 这方面的技术以来，一直关注其他厂商是如何做 IDE 的，刚开始了解 IDE 是从微信、百度、支付宝等这些开发者工具知道这些开发者工具是基于 electron 或 NW.js 去构建的，但是从头开始写成本比较高。后来也看了一些其他的 IDE，像 Weex Studio、白鹭Egret Wing、快应用IDE、APICloud Studio这类的是基于 VSCode 源码定制的，技术相对成熟，大部分功能现成的，工作量相对较少，于是就基于 VSCode 去定制了第一版的开发工具，详情可以看之前写的VSCode技术揭秘。直到后面了解到 Theia 这个框架，发现样式和功能与 VSCode 差不多，而且也部分支持 VSCode 的插件，最主要是能够通过扩展的形式去丰富 IDE 的视图功能，与 VSCode 修改 UI 源码相比，Theia 的方式更加好用，只不过前提是要对 Theia 的源码有所了解才可以去定制，所以当时就把 Theia 作为 IDE 的主要研究方向。

总体架构

Theia 被设计成一个桌面应用程序，也可以在浏览器和远程服务器的环境中工作。为了支持这两种情况，Theia 在两个单独的进程中运行。这些进程分别称为前端和后端，它们通过 WebSocket 上的 JSON-RPC 消息或 HTTP 上的 REST API 进行通信。对于 Electron，后端和前端都在本地运行，而在远程上下文中，后端将在远程主机上运行。前端和后端进程都有它们的依赖注入（DI）容器方便扩展功能。

扩展

Theia 是以一种非常模块化和可扩展的方式设计的。它支持以下三种扩展方式，相比 VSCode 只支持插件扩展而言，可定制化的成都更高。

• VSCode 扩展：易于编写，可在运行时安装。Theia 提供了与 VSCode 相同的扩展 API，因此扩展是兼容的。因此，要开发自己的扩展，请参考VSCode扩展文档。也可以使用 Theia 中现有的 VSCode 扩展，可以从Open VSX registry安装或下载扩展。

• Theia 扩展：Theia 扩展是在 Theia 应用程序内并直接与其他模块通信的模块（Theia 扩展）。Theia 项目本身也由 Theia 扩展组成。要创建 Theia 应用程序，您可以选择 Theia 项目提供的大量 Theia 扩展（核心扩展），添加自己的自定义 Theia 扩展，然后编译并运行结果。您的自定义 Theia 扩展将可以访问与核心扩展相同的 API。这种模块化允许您根据自己的需求扩展、调整或删除 Theia 中的几乎任何内容。此外，与 VSCode 扩展相比，使用 Theia 扩展开发特定用例（如复杂视图）更容易。从技术上讲，扩展是一个 npm 包，它公开了有助于创建 DI 容器的任意数量的 DI 模块（ContainerModule）。扩展通过在 package.json 中声明依赖项来使用，并在编译时安装。

• Theia 插件：Theia 插件是一种特殊类型的 VSCode 扩展，只在 Theia 中运行。它们共享 VSCode 扩展的体系结构和其他属性，但它们也可以访问仅在 Theia 中可用的附加 API，而不在 VSCode 中可用。最值得注意的是，Theia 插件也可以直接用于前端，而 VS 代码扩展仅限于后端。因此，Theia 插件可以直接操作 UI，而无需经过 webview 抽象，从而简化了开发过程。

下图显示了所有三个选项的高级体系结构。VSCode 扩展和 Theia 插件运行在一个专用进程中，可以在运行时安装，并针对定义的 API 工作。Theia 扩展在编译时添加，并成为 Theia 应用程序的核心部分。他们可以访问 Theia 的完整 API。

VSCode 与 Theia 区别

• 维护：VSCode 是 MIT 协议，基本上属于微软公司。Theia 是 EPL 协议，由 Eclipse Theia 基金委员会主导，可用于商业用途。

• 插件市场：VSCode 有自己独立的插件市场，插件丰富，但只能安装到 VS Code 中。Theia 仅支持从 openVSX 插件市场中下载，实际上是支持 VS Code 插件，但由于 VS Code 插件市场的限制，无法完全使用 VS Code 插件，只能由插件开发者将插件托管到 openVSX 上才行，所以插件数量小于 VS Code。

• 插件开发：VS Code 提供扩展注册命令、菜单、视图、语言服务器等相关功能，目前只能通过 VS Code 提供的 API 进行扩展，无法更换 logo，移除默认菜单、命令，创建复杂视图等功能。而 Theia 其实提供了两种插件机制，一种是类似于 VS Code 的插件开发机制， Plugin，它依赖于 Theia 提供的 API 进行插件开发，用户可在 IDE 运行时进行插件的安装、卸载。另外一种是 extension，这是直接构建在了我们工具当中，用户无法进行修改，它可以访问 Theia 内部的所有方法，我们可以对 Theia 所有的功能进行个性化开发。这种插件开发的缺点是，对开发人员要求相对而言比较高，需要了解 Theia 的内部机制，现有文档基本上也无法满足高定制化的开发需求。

环境搭建

刚开始研究 Theia 的时候版本是 1.11.0，那时候相对环境问题比较多，windows 兼容性也有，文档不全面等各种问题，不过现在文档相对全面一点，环境问题可以看这篇文章Windows下运行Eclipse Theia源码指南相对详细一些。

接下来我们研究 Theia 那肯定先把官方项目运行起来，我们可以学习一下官方文档Eclipse Theia文档，如果文档访问不了可以查看文档的 github 源码 https://github.com/eclipse-theia/theia-website。当然我们也可以查看快速入门，注意这里面的基础环境：

• Node.js >= 14.18.0，推荐使用 Node 的 LTS：目前是 16.x

• Yarn package manager >= 1.7.0 AND < 2.x.x

• git (If you would like to use the Git-extension too, you will need to have git version 2.11.0 or higher.)

• python3，因为需要node-gyp@8.4.1
  

然后就拉取代码，安装依赖，在这里如果安装依赖很慢甚至报错，基本上是网络问题，可以翻墙去下载，也可以在项目根目录下添加.npmrc 配置帮助快速安装。

chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriverphantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjsoperadriver_cdnurl=http://npm.taobao.org/mirrors/operadriverELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ puppeteer_skip_chromium_download = 1

这里介绍一下 windows 环境的配置。

python3 版本为 Python 3.6 或更高版本

Visual Studio构建工具17，构建工具可以参考Windows下运行Eclipse Theia源码指南这篇文章。

如果安装了多个版本的 python 或 Visual Studio，可以通过 npm config 调整使用的版本。

npm config set python /path/to/executable/python --globalnpm config set msvs_version 2017 --global

安装 windows-build-tools，以前，windows-build-tools 在 Windows 上构建 Native Nodes 模块是必需的。npm 包现在是 deprecated 因为 NodeJS 安装程序现在可以安装它需要的所有必需工具，包括 Windows 构建工具。

我们使用管理员身份打开 PowserShell，然后运行命令安装

npm --add-python-to-path install --global --production windows-build-tools

这样我们的环境配置完成。

构建自己的 IDE 工具

Theia 官方文档提供了两种构建基于 Theia 的产品方式：

• Theia Extension Yeoman 生成器：生成基于 Theia 的产品以及示例扩展

• Theia Blueprint：用于创建基于 Theia 的可安装桌面应用程序的模板工具这两种方式会生成配置好的 Theia 工程，不需要自己去重新搭建。

当然官方文档介绍了从零配置 Theia 工程的步骤。首先创建一个工程目录

$ mkdir theia-demo$ cd theia-demo

然后在工程根目录创建 package.json

{    "private": true,    "dependencies": {      "@theia/callhierarchy": "next",      "@theia/file-search": "next",      "@theia/git": "next",      "@theia/markers": "next",      "@theia/messages": "next",      "@theia/navigator": "next",      "@theia/outline-view": "next",      "@theia/plugin-ext-vscode": "next",      "@theia/preferences": "next",      "@theia/preview": "next",      "@theia/search-in-workspace": "next",      "@theia/terminal": "next",      "@theia/vsx-registry": "next"    },    "devDependencies": {      "@theia/cli": "next"    },    "scripts": {      "prepare": "yarn run clean && yarn build && yarn run download:plugins",      "clean": "theia clean",      "build": "theia build --mode development",      "start": "theia start --plugins=local-dir:plugins",      "download:plugins": "theia download:plugins"    },    "theiaPluginsDir": "plugins",    "theiaPlugins": {      "vscode-builtin-extensions-pack": "https://open-vsx.org/api/eclipse-theia/builtin-extension-pack/1.50.1/file/eclipse-theia.builtin-extension-pack-1.50.1.vsix"    },    "theiaPluginsExcludeIds": [      "vscode.extension-editing",      "vscode.git",      "vscode.git-ui",      "vscode.github",      "vscode.markdown-language-features",      "vscode.microsoft-authentication"    ]  }

其中可以看到 Theia 核心依赖都是一个一个的扩展包，@theia/cli列为构建时依赖项。它提供脚本来构建和运行应用程序。其中还有一些其他配置项。

• theiaPluginsDir：部署插件的相对路径

• theiaPlugins：要下载的插件集合（单个插件或扩展包） – 可以指向任何有效的下载 URL（例如：Open VSX、Github Releases 等）

• theiaPluginsExcludeIds：解析扩展包时要排除的插件列表

然后安装依赖包

yarn

然后，使用 Theia CLI 构建应用程序

yarn theia build

yarn 在我们的应用程序的上下文中查找由 theia 提供的可执行文件 @theia/cli，然后 build 使用 theia. 这可能需要一段时间，因为默认情况下应用程序是在生产模式下构建的，即经过混淆和缩小。当然我们也可以使用 yarn build 调用 scripts 脚本。

构建完成后，我们调用命令来启动。

yarn theia start --plugins=local-dir:plugins

也可以调用 yarn start 来执行 scripts 脚本。

启动后默认运行在 3000 端口上，然后打开浏览器可以看到运行起来的 Theia IDE。

我们也可以启动的时候指定特定网络和端口。

yarn start --hostname 0.0.0.0 --port 8080

以上是我们简单启动一个 Theia 的工程，作为一个 WEB IDE 在浏览器中访问，后续我们会介绍如果开发一个桌面客户端版的 IDE。

相关源码

openvsxtheia-appstheia

参考源码

由于文档内容比较欠缺，可以参考其他定制 Theia 的代码。

che-theia

Mbed Studio

Arduino IDE

参考文章

KAITIAN IDE 是如何构建扩展能力极强的插件体系的？

为未来研发模式而生，KAITIAN IDE 在业务中的探索

前端工程下一站 IDE

基于 KAITIAN 的前端工程研发模式变革

跑在浏览器上的小程序 IDE

基于 React 打造高自由度的 IDE 布局系统

Tide 研发平台 · 布局研发新基建

如何在团队内快速落地WebIDE

我们开源了一个轻量的 Web IDE UI 框架

阿里 & 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源

云端IDE基础框架介绍—ECLIPSE THEIA——兆松科技

其他 IDE 产品

Molecule

KAITIAN

看完觉得对您有所帮助别忘记关注呦