概述

自从接触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，因为须要[email protected]

而后就拉取代码，装置依赖，在这里如果装置依赖很慢甚至报错，基本上是网络问题，能够翻墙去下载，也能够在我的项目根目录下增加.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。

相干源码

openvsx
theia-apps
theia

参考源码

因为文档内容比拟欠缺，能够参考其余定制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