牛逼！仿VScode 开源了一个在线IDE

VS code 相信大家都用过，今天就给大家介绍一个开源的在线Web IDE——molecule

Molecule

Molecule 是一款受 VSCode 启发，使用 React.js 构建的 Web IDE UI 框架。通过一种类似 VS Code 扩展机制（Extension），可快速、轻松搭建一个高度抽象的 Web IDE UI 系统。同时基于 内置集成了 QuickAccess 和 Keybinding 等功能。

功能

• 开箱即用：内置了多种组件以及 Service 以供用户自由组合使用，通过事件订阅机制轻松实现各种复杂交互，满足大量 IDE 场景的使用。
• 可扩展：支持通过插件（Extension）的形式，丰富自身功能，同时支持部分 VSCode 的扩展应用。
• 内置 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 支持

安装

Node.js 12.13.0 + 版本 React.js 16.14.0 + 版本

用命令行工具快速创建一个自带 TypeScript 和你选择的脚手架项目

npx @dtinsight/create
# Or
yarn create @dtinsight/

以在终端看到 Downloading application successfully 信息，则表示安装成功。

然后进入到项目，进行安装依赖

启动

yarn start
# 或者 npm
npm run start

这个命令会自动在默认浏览器中打开 http://localhost:3000 这个地址，即可看到 Molecule 默认的 IDE 界面。

IDE工作台结构

• 菜单栏（MenuBar）：主要负责 Workbench 主菜单的显示和管理，例如常见的 文件（File）、编辑（Edit）、选择（Selection） 、视图（View）等菜单项；
• 活动栏（ActivityBar）：主要负责展示工作台当前的活动项，例如浏览（Explorer），搜索（Search）等模块。
• 边栏（Sidebar）：工作台的左边栏，其内置的浏览（Explorer）模块为 Workbench 重要的导航模块；
• 编辑区（Editor）：通过编辑器标签页来展示具体的工作内容，例如编辑代码，或者渲染自定义的操作界面。
• 态栏（StatusBar）：位于整个 Workbench 的最底部, 用来展示状态信息。例如当前编辑器中文件的语言(Language)，当前光标所在行（Ln）和列（Col），通知（Notification）等信息。

Molecule是一个非常棒的在线 IDE ，他针对Workbench UI、 ColorTheme 、自定义热键、快捷访问等功能进行自定义扩展。如果你也想自己搭建一个在线的IDE，可以访问它的源码

github链接:https://github.com/DTStack/molecule