如何通过Monaco全局API为已有VIM模式编辑器设置相对行号？

云上老周

2026-8-6

Monaco Editor VIM模式下设置相对行号的方法

核心API说明

你列出的全局对象中，RenderLineNumbersType和EditorOption就是实现需求的关键：

RenderLineNumbersType.Relative：对应相对行号模式
EditorOption.vim：用于判断VIM模式是否启用

操作步骤（无需修改代码库，直接在浏览器控制台执行）

1. 自动处理所有新创建的编辑器实例

监听编辑器创建事件，自动为新实例启用相对行号，还可配合VIM模式切换动态调整：

// 监听新编辑器实例创建
monaco.onDidCreateEditor(editor => {
  // 默认启用相对行号
  editor.updateOptions({
    lineNumbers: monaco.editor.RenderLineNumbersType.Relative
  });

  // 可选：仅在VIM模式启用时显示相对行号
  const vimConfigListener = editor.onDidChangeConfiguration(e => {
    if (e.has('vim.enabled')) {
      const isVimActive = editor.getOption(monaco.editor.EditorOption.vim)?.enabled;
      editor.updateOptions({
        lineNumbers: isVimActive 
          ? monaco.editor.RenderLineNumbersType.Relative 
          : monaco.editor.RenderLineNumbersType.On
      });
    }
  });

  // 编辑器销毁时清理监听
  editor.onDidDispose(() => vimConfigListener.dispose());
});

2. 为已存在的编辑器实例设置

如果页面上已经有编辑器实例，部分网站会将其挂载到全局变量（比如window.editor），可直接修改配置：

// 替换为实际的全局编辑器变量名，若不确定可尝试遍历或查看网站源码
if (window.editor) {
  window.editor.updateOptions({
    lineNumbers: monaco.editor.RenderLineNumbersType.Relative
  });
}