跳到主要内容
版本：Next

概览

在正式开始使用 Molecule 前，我们一起来简单的了解下几个基本的概念，以确保您能快速开始 Molecule 的使用。

molecule

扩展（Extension）​

扩展（Extension）是 Molecule 用来实现功能自定义的插件技术。通过扩展机制，我们可以轻松实现自定义扩展 Workbench、 ColorTheme、i18n、Settings、Keybinding、QuickAccess 等核心功能。

工作台（Workbench）​

工作台（Workbench）是 IDE UI 中最重要的部分了。在 Molecule 中我们把工作台抽象成了多个子组件：MenuBar、 ActivityBar、Sidebar、 Editor、Panel、StatusBar 主要 6 大模块。每个核心模块又分别提供了 React 组件和基础的服务（Service）对象，以便开发者进行操作或者自定义。

颜色主题（ColorTheme）​

Molecule 兼容了 VSCode ColorTheme ，并实现了一套简单扩展机制。通过快捷键 Command/Ctrl + K 即可打开主题「切换面板」，或者通过「设置菜单」，在菜单的最下面看到「颜色主题」。

在 Molecule 中我们有许多内置的主题，包括 Dark、 Light、Monakai、Github Plus、High Contrast 等等。

国际化（i18n）​

Molecule 有一个基本的国际化（i18n）方案，并支持扩展（Extension）机制。默认有三种内置的语言，分别是中文、英文和韩文。 我们可以通过快捷键 Command/Ctrl Shift + L 打开语言「切换面板」，选择一种语言，然后确认选择，然后在页面的右下角将会有一个提醒窗口，点击确认会重新加载当前页面，之后语言环境就会发生更改。

更多关于自定义语言环境的细节，请参考扩展语言环境。

设置（Settings）​

Molecule 支持通过在设置（Settings）中修改部分配置项。例如：当你想要修改编辑器的字体大小时，只需要打开设置菜单中的「设置」选项，然后把 editor.fontSize 的值从 12 修改至 14 即可。

更多关于去扩展设置项的内容，请参考 扩展设置 。

快捷键（Keybinding）​

Molecule 利用 monaco-editor 强大的 Keybinding 服务，支持以扩展的方式自定义各种快捷键（Keybinding）。Molecule 默认也有一些内置的快捷键：

  • Command/Ctrl + , 可以快速访问设置；
  • Command/Ctrl + Shift + L 可以快速切换语言环境；
  • Command/Ctrl + Shift + P 可以快速访问Command Palette；

关于如何自定义快捷键，请参考扩展快捷键。

快捷访问（QuickAccess）​

QuickAccess

快捷访问（QuickAccess）是 VSCode、Sublime 等编辑器工具中场景的一种交互组件。我们基于 monaco-editor 内置的 QuickInputService 和 Molecule 的扩展机制，让开发者可以轻松的实现自己的快捷访问。

更多关于如何自定义快捷访问的内容，请参考扩展快速访问来了解如何扩展快速访问面板。

原子组件（Components)​

Molecule 提供了很多基本的 React UI 原子组件，例如 Menu、TreeView、ContextMenu 等等。而我们的 Workbench UI 就是在这些组件的基础上构建而来。通过这些内置的组件，我们可以在更大程度上，满足我们开发者在 UI 上的扩展诉求。另外，Molecule 支持引用例如 antd 这类第三方的 UI 组件库，来满足自己的自定义诉求。

目前我们使用了 Storybook 来开发维护这些组件，关于这些组件的使用，我们可以在源码仓库下的 stories 中找到示例。