monaco-editor 使用总结

monaco-editor 使用总结

编辑器适配屏幕缩放

  1. 手动调用 editorIns.layout() 方法 文档
  2. 实例化编辑器的时候 automaticLayout 声明为 true 文档 (可能有性能问题)

Diff Editor

  1. 通过 monaco.editor.createDiffEditor 方法创建 diff editor 实例;
  2. 通过 diffEditorIns.setModel 方法设置 diff 的原始值和现在的值
    diffEditorIns.setModel({
    original: monaco.editor.createModel(originalValue, 'javascript'),
    modified: monaco.editor.createModel(nowValue, 'javascript'),
    });
    

更新编辑器 options

通过 updateOptions 来更新,比如

editorIns.updateOptions({
  readOnly: true,
});

自定义语言高亮

  1. 如果是自定义的语言需要先注册自定义语言名称

    monaco.languages.register({ id: 'configItem' });
    
  2. 定义高亮规则 setMonarchTokensProvider 文档

    // 如果是已有语言高亮则不需要第一步直接设置高亮规则就可以
    monaco.languages.setMonarchTokensProvider('yaml', {
    tokenizer: {
     root: [[tokenRegx, { token: 'keyword' }]],
    },
    });
    // 自定义语言
    monaco.languages.setMonarchTokensProvider('configItem', {
    tokenizer: {
     root: [[tokenRegx, { token: 'keyword' }]],
    },
    });
    

标记错误

通过 monaco.editor.setModelMarkers 方法标记位置点,文档

monaco.editor.setModelMarkers(
  model,
  'javascript',
  [{
    startLineNumber: 2,
    endLineNumber: 2,
    startColumn: 1,
    endColumn: 10,
    severity: monaco.MarkerSeverity.Error,
    message: `语法错误`,
  }],
);

Quick Fix

通过 setModelMarkers 标记错误或者警告之后 hover 会有一个 modal 里面展示错误信息以及 quick fix 的选项,如何来定义 quick fix 的行为呢。
这里需要通过 monaco.languages.registerCodeActionProvider 来定义quick fix 的行为,支持 editcommand 两种类型的行为。

  1. edit 是直接替换被指定的位置的文本;
  2. command 则是完全的自定义 fix 行为,可以做任何事情。

CompleteProvider

用于定义自动完成的 provider

HoverProvider

用于定义鼠标 hover 的 provider。

public provideHover(
  model: monaco.editor.ITextModel,
  position: monaco.Position,
  token: monaco.CancellationToken,
)

PS: 貌似不支持关键词定义 hover tips

解决方案:

  1. 获取 hover 位置;
  2. 获取 hover 的那一行内容 model.getLineContent(lineNumber) ;
  3. 匹配 hover 行关键字;
  4. 获取关键字位置;
  5. 根据 鼠标 hover column 确定 hover 的关键字 位置;
  6. 提示 关键字内容等。

本地化 i18n

目前 monaco-editor 官方仅支持 AMD 方式的 i18n 配置。
补丁方案 monaco-editor-esm-webpack-plugin