Monaco 代码编辑器主题配置实践

背景

Monaco 编辑器是目前 VS code 代码编辑器的开源内核，在功能上基本碾压同类的其他代码编辑器，同时得益于丰富的插件体系，目前很多市面上在线 IDE 工具也都是基于此做了二次开发，包括 Coding 的 Cloud Studio 产品，以及 LeetCode 里的代码编辑器都是 Monaco，影响力可见一斑。

对于开源方案，大多数的情况下我们都需要二次修改以适配最终的业务产品形态，因此我们也有修改编辑器主题的诉求。

思路

通过代码捞出所有的配置，自己一个个去实验。

Playground：https://microsoft.github.io/monaco-editor/playground.html

const colors = _amdLoaderGlobal.require('vs/platform/registry/common/platform').Registry.data.get('base.contributions.colors').colorSchema.properties;
monaco.editor.create(document.getElementById("container"), {
	value: JSON.stringify(colors, null, 2),
	language: "json"
});

其次参照文档，寻求完整的解释含义，不要只看 StackOverflow 上或者网络上其他地方的评论给出的配置参数，有些是有使用前提的，比如鼠标滚轮事件，默认情况下 Monaco 在代码编辑器容器里不对该事件做冒泡，也就导致当你在编辑器里用鼠标滚轮滚动到底部时，也无法触发页面的滚动，因此需要将该配置设置为 false 。

Optional alwaysConsumeMouseWheel?: boolean Always consume mouse wheel events (always call preventDefault() and stopPropagation() on the browser events). Defaults to true. NOTE: This option cannot be updated using updateOptions() https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorScrollbarOptions.html#alwaysConsumeMouseWheel

所以这个配置只能在初始化编辑器的阶段就设置。不看文档自己瞎折腾必定失败。

React 应用

由于前端目前都在使用 Vue 或者 React，图省事的话，我们可以使用第三方的 @monaco-editor/react 库就不需要关心配置相关的事情，开箱即用，底层也是依赖了微软的 monaco-editor ，在业务层我们只需要关心 @monaco-editor/react 提供的 API 即可。

这里给出一个实际应用，我们所关心的 API 基本上就这几个，剩下的可以参照文档。

<Editor
  height="250px"
  defaultLanguage="sql"
  options={{ // 初始化时就需要设置的配置放在这里
    scrollbar: {
      useShadows: false,
      alwaysConsumeMouseWheel: false
    }
  }}
  theme="editorTheme" // 自定义主题
  beforeMount={handleEditorBeforeMount} // 编辑器加载前
  onMount={handleEditorDidMount} // 编辑器加载后
  value={content} // 编辑器内容文本
  onChange={handleEditorChange} // 监听内容变化
/>

TODO

• 后续给一份配置好的主题参数
• 加载优化方案