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

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