更多内容可以查看专题https://codeteenager.github.io/theia-analysis/Overview自从接触IDE技术以来，一直在付出关注其他厂商是如何做IDE的，我是从微信、百度、支付宝等开发者工具开始了解IDE的，我知道这些开发者工具都是基于electron或者NW.js构建的，但是编写成本来自划痕比较高。后来也看了一些其他的IDE，比如WeexStudio、白鹭鹭翼、快应用IDE、APICloudStudio，都是基于VSCode源码定制的。技术比较成熟，大部分功能都是现成的，工作量也比较小，所以我基于VSCode定制了第一版开发工具。具体可以参考之前写的VSCode技术揭秘。直到后来了解了Theia框架，才发现其风格和功能与VSCode类似，而且还部分支持VSCode插件。最重要的是可以通过扩展来丰富IDE的视图功能。与VSCode修改UI源码相比，Theia的方式更易于使用，但前提是你需要知道Theia的源码才能进行定制，所以Theia被作为IDE的主要研究方向在那时。总体架构Theia被设计为桌面应用程序，也可以在浏览器和远程服务器环境中工作。为了支持这两种情况，Theia在两个独立的进程中运行。这些进程分别称为前端和后端，它们通过基于WebSocket的JSON-RPC消息或基于HTTP的RESTAPI进行通信。使用Electron，后端和前端都在本地运行，而在远程上下文中，后端将在远程主机上运行。前端和后端进程都具有用于扩展功能的依赖项注入(DI)容器。ExtendingTheia以非常模块化和可扩展的方式设计。它支持以下三种扩展方式，比只支持插件扩展的VSCode更具可定制性。VSCode扩展：易于编写，可在运行时安装。Theia提供与VSCode相同的扩展API，因此扩展是兼容的。因此，要开发自己的扩展，请参阅VSCode扩展文档。也可以在Theia中使用现有的VSCode扩展，这些扩展可以从OpenVSX注册表安装或下载。Theia扩展：Theia扩展是存在于Theia应用程序中并直接与其他模块（Theia扩展）通信的模块。Theia项目本身也包含Theia扩展。要创建一个Theia应用程序，您可以从Theia项目提供的大量Theia扩展（核心扩展）中进行选择，添加您自己的自定义Theia扩展，然后编译并运行结果。您的自定义Theia扩展将可以访问与核心扩展相同的API。这种模块化允许您根据需要扩展、调整或删除Theia中的几乎所有内容。此外，使用Theia扩展比使用VSCode扩展更容易开发复杂视图等特定用例。从技术上讲，扩展是一个npm包，它公开了任意数量的DI模块(ContainerModule)，这些模块有助于创建DI容器。通过在package.json中声明依赖项来使用扩展，并在编译时安装。Theia插件：Theia插件是一种特殊类型的VSCode扩展，只能在Theia中使用。它们共享VSCode扩展的架构和其他属性，但它们也可以访问仅在Theia中可用的其他API，而在VSCode中不可用。最值得注意的是，Theia插件也可以直接在前端使用，而VSCode扩展仅限于后端。因此，Theia插件可以直接操作UI而无需经过webview抽象，简化了开发过程。下图显示了所有三个选项的高级架构。VSCode扩展和Theia插件在专用进程中运行，可以在运行时安装，并针对定义的API工作。Theia扩展是在编译时添加的，成为Theia应用程序的核心部分。他们可以访问Theia的完整API。VSCode和Theia维护的区别：VSCode是MIT协议，基本属于微软。Theia是EPL协议，由EclipseTheia基金会委员会牵头，可用于商业用途。插件市场：VSCode有自己独立的插件市场，里面有丰富的插件，但只能安装在VSCode中。Theia只支持从openVSX插件市场下载。事实上，它支持VSCode插件。但是由于VSCode插件市场的限制，VSCode插件并不能完全使用。插件开发者只能在openVSX上托管插件。因此，插件数量比VSCode少。插件开发：VSCode提供了扩展的注册命令、菜单、视图、语言服务器等相关功能。目前只能通过VSCode提供的API进行扩展。它不能更改徽标、删除默认菜单和命令、创建复杂视图和其他功能。Theia其实提供了两种插件机制，一种是类似于VSCode的插件开发机制Plugin，它依赖于Theia提供的API进行插件开发，用户可以在IDE的同时安装和卸载插件在跑。另一种是扩展，它直接内置在我们的工具中，用户无法修改。它可以访问Theia内部的所有方法，我们可以对Theia的所有功能进行个性化设置。这种插件开发的缺点是对开发人员的要求比较高。他们需要了解Theia的内部机制，现有的文档基本不能满足高度定制化开发的需求。最初搭建环境时Theia的版本是1.11.0。当时有很多环境问题，包括windows兼容性，文档不全。不过现在文档比较全面了。对于环境问题，可以看这篇WindowsRunEclipseTheia源码教程，比较详细。接下来，我们在研究Theia的时候，首先要运行官方的项目。大家可以研究官方文档EclipseTheia文档。如果文档无法访问，可以查看文档的github源码https://github.com/eclipse-theia/theia-website。当然我们也可以查看快速入门，注意这里的基础环境：Node.js>=14.18.0，推荐使用Node的LTS：目前16.xYarnpackagemanager>=1.7.0AND<2.x.xgit（如果你也想使用Git扩展，你需要git版本2.11.0或更高。）python3，因为你需要node-gyp@8.4.1然后拉取代码，安装dependencies，如果安装依赖很慢甚至报错。基本上，这是一个网络问题。可以翻墙下载，也可以在项目根目录添加.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版本为Python3.6或更高版本VisualStudio构建工具17，构建工具可参考文章Windows下运行EclipseTheia源代码指南。如果安装了多个版本的python或VisualStudio，可以通过npmconfig调整使用的版本。npmconfigsetpython/path/to/executable/python--globalnpmconfigsetmsvs_version2017--global安装windows-build-tools，以前，windows-build-tools需要在Windows上构建NativeNodes模块。npm包现已弃用，因为NodeJS安装程序现在可以安装它需要的所有必需工具，包括Windows构建工具。我们以管理员身份打开PowserShell，然后运行命令安装npm--add-python-to-pathinstall--global--productionwindows-build-tools这样我们的环境配置就完成了。构建自己的IDE工具Theia官方文档提供了两种构建基于Theia的产品的方法：TheiaExtensionYeomanGenerator：生成基于Theia的产品和示例扩展TheiaBlueprint：用于创建基于Theia的可安装桌面应用程序的模板工具这两种方法将生成一个配置Theia项目而无需自己重建它。当然，官方文档介绍了从零开始配置Theia项目的步骤。首先创建一个工程目录$mkdirtheia-demo$cdtheia-demo然后在工程根目录创建package.json{"private":true,"dependencies":{"@theia/callhierarchy":"next","@theia/文件搜索”：“下一个”，“@theia/git”：“下一个”，“@theia/markers”：“下一个”，“@theia/messages”：“下一个”，“@theia/navigator”：“下一个”，“@theia/outline-view”：“下一个”，“@theia/plugin-ext-vscode”：“下一个”，“@theia/preferences”：“下一个”，“@theia/preview”：“下一个”，“@theia/search-in-workspace”：“下一个”，“@theia/terminal”：“下一个”，“@theia/vsx-registry”：“下一个”}，“devDependencies”：{“@theia/cli":"下一个"},"脚本":{"prepare:"yarnrunclean&&yarnbuild&&yarnrundownload:plugins","clean":"theiaclean","build":"theiabuild--modedevelopment","start":"theiastart--plugins=local-dir:plugins","download:plugins":"theiadownload: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（例如：OpenVSX、GithubReleases等）theiaPluginsExcludeIds：解析时要排除的插件列表extensionpacks然后安装依赖包yarn然后，使用TheiaCLI构建应用程序这可能需要一段时间，因为默认情况下应用程序是在生产模式下构建的，即混淆和缩小。当然我们也可以使用yarnbuild来调用scripts脚本。构建完成后，我们调用命令开始。yarntheiastart--plugins=local-dir:plugins也可以调用yarnstart来执行scripts脚本。启动后默认运行在3000端口，然后打开浏览器就可以看到正在运行的TheiaIDE。我们也可以在启动时指定具体的网络和端口。yarnstart--hostname0.0.0.0--port8080及以上是为了让我们简单地启动一个Theia项目，并在浏览器中作为WEBIDE访问它。稍后，我们将介绍如何开发桌面客户端版本的IDE。相关源码openvsxtheia-appstheia参考源码由于文档内容比较匮乏，可以参考其他自定义的Theia代码。che-theiaMbedStudioArduinoIDE参考文章KAITIANIDE如何搭建扩展性强的插件系统？为未来研发模式而生，KAITIANIDE在业务中探索前端工程。下一站IDE是基于KAITIAN前端工程研发模式的转变。运行在浏览器上的小程序IDE基于React打造高自由度IDE布局系统潮汐研发平台·布局研发新基建如何在团队中快速实现WebIDE我们开源一个轻量级的WebIDEUI框架阿里&蚂蚁自研IDE研发框架OpenSumi官方开源云IDE基础框架介绍—ECLIPSETHEIA——兆松科技其他IDE产品MoleculeKAITIAN看完了，相信对你有所帮助。不要忘记注意。
