<div align="center"> <img src="https://user-images.githubusercontent.com/2766811/146497934-b619b3a0-dec9-44ef-805b-f69883107caf.png" width="20%" height="20%" alt="watchman-logo" /> <h1>Molecule</h1> <h3>A lightweight Web IDE UI Framework</h3>[![CI][ci-image]][ci-url] [![Codecov][codecov-image]][codecov-url] [![NPM downloads][download-img]][download-url] [![NPM version][npm-version]][npm-version-url]</div>[ci-image]: https://github.com/DTStack/molecule/actions/workflows/main.yml/badge.svg[ci-url]: https://github.com/DTStack/molecule/actions/workflows/main.yml[codecov-image]: https://codecov.io/gh/DTStack/molecule/branch/main/graph/badge.svg?token=PDjbCBo6qz[codecov-url]: https://codecov.io/gh/DTStack/molecule[download-img]: https://img.shields.io/npm/dm/@dtinsight/molecule.svg?style=flat[download-url]: https://www.npmjs.com/package/@dtinsight/molecule[npm-version]: https://img.shields.io/npm/v/@dtinsight/molecule.svg?style=flat-square[npm-version-url]: https://www.npmjs.com/package/@dtinsight/molecule[Molecule](https://dtstack.github.io/molecule/) 是一款受 **VSCode** 启发，使用 **React.js** 构建的 **Web IDE UI** 框架。我们设计了类似 VSCode 的**扩展**（Extension)机制，可以帮助我们使用 React 组件快速完成对 Workbench 的自定义。Molecule 与 **React** 项目集成非常方便，我们已经在 [DTStack](https://www.dtstack.com/) 多个产品、项目中使用。## 核心功能- 内置 React 版本的 Visual Studio Code Workbench UI- 基本兼容 Visual Studio Code 的 ColorTheme- 支持使用 React 组件自定义 Workbench UI 样式- 内置 Monaco Editor Command Palette、Keybinding等模块，并支持扩展- 支持 i18n，内置简体中文、English 2 种语言- 内置一个简单的 Settings 模块，支持在线编辑修改以及扩展- 内置默认的 Explorer, Search 等组件，并支持扩展- Typescript 支持## 与其他开源的 Web IDE 的区别？- Molecule 只是一个**单纯的 Web IDE UI 交互**框架，不涉及例如文件系统、版本管理、 LSP、DAP、Terminal 等更复杂的 IDE 功能，需要开发者自己手动实现- 基于 **React.js** 的组件库，更好的 UI 自定义能力, **React.js 应用**无缝接入- 基本兼容了 VS Code 上千种 **ColorTheme** 扩展## 场景- Web IDE 场景- 企业级的 React 客户端管理类应用- 类桌面端交互的 Web 应用- 编辑器，日志等应用- Electron 跨端应用等## 截图