MoleculeWeb IDE UI 框架

联合创作 · 2023-09-20 01:13

Molecule是一个受VS Code启发,使用React.js构建的Web IDE UI 框架。通过设计一种类似VS Code扩展机制(Extension),可快速、轻松搭建一个高度抽象的Web IDE UI系统。同时基于Monaco Editor,内置集成QuickAccess和Keybinding等功能,提供简单的API以供使用。

得益于扩展机制和React组件化技术,Molecule可以对Workbench UI、 ColorTheme 、自定义热键、快捷访问等功能进行自定义扩展。另外,开发者可将业务代码和IDE UI架构解耦,在保持业务高速迭代的同时,使得产品交互体验依然保持良好的可持续进化能力。

Molecule参考了VS Code的设计,对UI抽象、编辑器、颜色主题等重新进行了梳理,Molecule 核心功能如下:

▪ 内置React 版本的Visual Studio Code Workbench UI

▪ 基本兼容 Visual Studio Code的ColorTheme

▪ 支持使用React组件自定义Workbench UI样式

▪ 内置Monaco Editor Command Palette、Keybinding等模块,并支持扩展

▪ 支持i18n,内置简体中文、English两种语言

▪ 内置一个简单的Settings模块,支持在线编辑修改以及扩展

▪ 内置默认的Explorer, Search等组件,并支持扩展

▪ Typescript 支持

同时Molecule具备以下优势:

React.js 应用无缝接入

▪ 基于  React.js 的组件库,更好的 UI 自定义能力

▪ 基本兼容了 VS Code  上千种 ColorTheme 扩展

▪ Molecule 只是一个单纯的 Web IDE UI 交互框架,不涉及例如文件系统、版本管理、 LSP、DAP、Terminal 等更复杂的 IDE 功能,需要开发者自己手动实现。

浏览 15
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报