作者|

来源 | 阿里巴巴技术公众号

经过阿里巴巴集团和蚂蚁集团联建团队近三年的努力，国内首个强定制、高性能、兼容VS Code插件体系的IDE开发框架今日正式开源。

什么是一？

是一款针对垂直领域开发的低门槛、高性能、高定制化的双端（Web和）IDE框架。

该框架是由阿里巴巴集团淘宝工程团队和蚂蚁集团体验技术部及研发效能团队联合发起，共同开发的标准化 IDE 研发框架，基于 + 编码，实现包括资源管理器、编辑器、调试、Git 面板、搜索面板等核心功能模块。开发者只需简单配置我们的启动项目，即可快速构建自己的本地或云端 IDE 产品。框架本身兼容 VS Code 插件生态，主流的 VS Code 插件均可无缝运行在研发型产品中。同时，框架还为开发者提供了多种低成本、高定制化的视图定制能力，可满足 IDE 场景中绝大多数视图定制场景。

对于 IDE 开发，市面上已经有 code- 等开源解决方案，为什么我们会选择自研？从 2019 年至今，我们发现阿里巴巴、蚂蚁集团已经有不少 IDE 产品，大部分产品对于 IDE 产品的前期搭建大致相同，但这部分前期搭建工作少则需要团队几个月，多则半年、一年，存在大量重复劳动问题。在一些团队使用开源解决方案的过程中，大家或多或少都遇到过一些问题，比如定制能力有限、源代码依赖较深、维护困难、无法满足内部能力要求等。最终我们决定集合多个团队的力量，走上自研之路。

二者各有什么优点？

如上文所说，它是一个针对垂直领域开发的低门槛、高性能、高定制化的双端（Web和）IDE框架，其特点主要体现在以下几个方面：

1 全面的视图定制功能

除了拥有与主流浏览器相似的性能和编码体验外，在面向业务的垂直领域，我们拥有远超同类框架的定制能力。基于我们的基础框架，您可以通过模块或插件的方式自由定制您的IDE产品，实现真正的“全视图定制”能力。

在很多内部产品实现阶段，我们会很自然地使用模块的方式来实现基础能力，以实现更好的可维护性；使用插件的方式来定制业务视图或者能力，以实现更高的定制化。以阿里内部的一些研发场景为例，其架构分层如下：

2 丰富的垂直领域研发支持经验

在正式开源之前，它已经在阿里和蚂蚁集团内部持续孵化了两年，期间积累并落地了一系列垂直领域的代表性研发案例，你能想到的大部分研发实践场景，大概都能在其中找到实践经验。

1. 小程序开发场景

针对小程序开发场景，支付宝小程序开发者工具和淘宝小程序开发者工具均以作为核心框架实现，截至目前每月服务的开发者数量已达2万+。

通过我们的贡献点和附加的 sumi API，我们可以通过插件实现进一步的视图定制。例如：

1）定制不同的显示

2）实现独立、通信的窗口调度（如模拟器）

同时，共享的底层和插件能力也让端到端的快速迁移成为可能，通过移植支付宝小程序开发工具相关插件，我们在短短一个月内完成了对功能类似但使用场景不同的淘宝小程序开发工具初始版本的支持，并同时孵化了O2客户端供内部使用。

2. 基于云端的一体化研发链

在基于云的一体化研发链条上，我们对外有阿里云开发平台，对内有O2、蚂蚁等产品。

传统的研发链如下图上部所示。

在开始一个项目开发之前，我们经常需要经历一些简单或繁琐的环境配置工作。你的编码环境也是和云环境分离的。借助阿里云等云产品的容器能力，我们可以构建一个属于企业或团队的云端编码环境，让开发者真正省去环境配置的问题，在云端完成所有的开发工作。

通过深度的流程定制，帮助开发者快速进入开发状态。

通过与内部研发平台对接，可以一站式完成开发、测试、部署等任务。

3.纯前端构建

纯前端构建能力是阿里和蚂蚁集团内部应用最为广泛的能力，提供不依赖服务器提供所需编辑器启动的 Node.js 服务，通过纯前端资源和静态接口定义直接构建基本的编辑器界面。

其实现的核心是针对原本依赖 Node 的文件、Git 等服务抽象出一层服务层，让开发者可以手动定义文件读写等服务的具体逻辑。同时基于提供的 Web API，让语言服务运行在浏览器的 Web 环境中，从而将框架去 Node 化，达到纯前端构建的效果。

基于这一层实现，完全可以实现一个基于 Rest API 的纯前端编辑器，从中可以直接查看、编辑、提交代码。后续我们会考虑做一个对应的案例。在内部，典型的应用有以下几种场景：

1. 代码审查

2. 代码显示

3. 远程笔试

我们也在代码仓库[1]中提供了简单的入门示例/ide--lite，您也可以直接通过预览页面[2]查看Demo效果。

3. 完整的 VS Code 插件支持

相信有关注过IDE框架的同学一定对它不陌生，作为兼容VS Code插件的IDE框架，它的确兼容了部分VS Code插件能力，但是对后续VS Code API的兼容已经越来越少，基本还是要靠社区开发者的发掘和贡献。

设计时就考虑到了兼容 VS Code 插件生态，因此对框架会有持续的需求。开源后我们计划每三个月完成一次 VS Code 插件 API 的适配，适配计划的制定会由相应的版本管理员在讨论区组织完成。目前已经适配到 VS Code v1.60.0 版本标准 API，进度可以在适配计划中看到。

3. 与市面上主流框架的区别

我们在设计初期对VS Code的源码进行了深入的研究，在实现过程中为了兼容VS Code插件生态和主流编辑器的一些功能和体验，在一些设计和实现上也参考了两位老师的一些源码实现，相应的代码块都标注了版权头信息。

1 与 VS Code 的关系

VS Code 是市场份额比较大的 IDE，它的核心是一个 IDE 产品，跟我们的框架属性有本质区别，整体上是一个 ToC 的产品，开发者定制它的门槛和成本较高，可定制的内容比较有限，大部分都是通过插件进行有限扩展。

我们的框架主要服务于ToB用户，对于需要通过IDE框架构建自有/本地IDE产品，但又没有足够的技术研发能力的中小企业来说，是一个简单、便捷的开发选择。

2 与

作为后起之秀，它借鉴了 VS Code 的一些设计理念，经过多年的发展，已经逐渐成熟，社区也比较繁荣，背靠基金会，对 IDE 开发者来说也是一个不错的开发选择，与我们的框架形成了竞争。

它提供了模块化构建 IDE 产品的能力，大多数视图上的定制都可以通过模块进行扩展（这一点在我们的工作中也有参考）。插件能力方面，兼容大部分 VS Code 插件，提供了 VS Code 插件 API 的子集，部分插件 API（如 等）尚未完全实现，暂无后续持续跟进计划。

基于以上几点，框架除了支持基础的模块扩展，还在插件层面持续跟进 VS Code 标准 API 的规划（目前 VS Code 1.16.0 版本 API 已经实现）。同时我们实现了前端沙箱，并提供了一系列 sumi API，通过插件的方式自由扩展我们的视图能力。熟悉前端的同学可以直接上手编写前端组件，通过我们提供的丰富 API 实现相应的功能视图。

4. 为什么要开源？

IDE产品的研发一直是一个高门槛、耗时耗力的工作。我们希望通过开源的方式，帮助对IDE感兴趣的开发者更好的了解和掌握IDE研发的技术，让更多的开发者可以低门槛的开发出属于自己的IDE产品。通过社区开发者的使用，也能帮助我们更好的完善我们的框架，获得更多的需求场景输入。同时通过社区的影响力，让框架获得更加长远的发展。

5.后续规划1版本发布

框架目前每两到三周进行一次迭代发布任务，由版本管理员统一维护、合并相关功能和问题修复。每次迭代时，我们都会安排两位“版本检查员”进行版本检查，测试通过后再升级一个版本发布。我们会持续保证最新两个版本的有效性，即“如果发现影响功能的问题，我们会在最新两个版本中同步修复并发布版本”。版本图如图所示：

以近期迭代计划2022年1月为例，版本发布计划如下：v2.14.0计划[3]

2

目前，2022 年已经有了初步原型，请参阅 2022 年 [4] 讨论。它将根据社区反馈和讨论在二月或三月正式确认。

我们将继续完成 VS Code API 的适配、编码/调试体验的优化以及性能优化，同时积极收集社区的功能需求，以两周迭代为周期选择性地吸收到框架计划中。

同时我们也对框架制定了一些基本的长远目标，如下图所示：

六、写在最后

今天的开源只是我们迈出的一小步，我们期待您的反馈，也欢迎您使用它来构建您自己的 IDE 产品。

最后，如果你有兴趣，你也可以来到/core[5]仓库，为我们的框架贡献一些你的代码和意见，这将是我们莫大的荣幸。

项目地址：

官网地址：

[1]

[2]

[3]

[4]

[5]

如何进行CDN和下载优化分析