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 功能,需要开发者自己手动实现。

浏览 4
点赞
评论
收藏
分享

手机扫一扫分享

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

手机扫一扫分享

编辑 分享
举报