如何在@monaco-editor/react中为错误添加行号前感叹号标注

@monaco-editor/react 基于原生 monaco-editor 封装，你可以通过 monaco 内置的**装饰器（Decoration）**能力，结合编辑器的错误标记（Marker）信息，在错误行的行号栏添加感叹号提示，具体实现步骤如下：

步骤1：获取编辑器实例与monaco核心对象 #

在组件的onMount回调中拿到编辑器实例和monaco全局对象，所有后续逻辑都在这个回调内完成：

import Editor from "@monaco-editor/react";

function JsCodeEditor() {
  const handleEditorMount = (editor, monaco) => {
    // 后续所有逻辑都写在这个函数内
  }

  return <Editor
    height="800px"
    defaultLanguage="javascript"
    onMount={handleEditorMount}
  />
}

步骤2：监听错误标记更新事件 #

monaco 会把所有语法、lint错误存储在 Marker 列表中，监听Marker变化事件，每次错误更新时同步刷新行号栏标记：

// 写在handleEditorMount函数内
monaco.editor.onDidChangeMarkers(([resource]) => {
  const currentModel = editor.getModel();
  // 只处理当前激活编辑器的错误更新
  if (!currentModel || resource.toString() !== currentModel.uri.toString()) return;

  // 筛选出当前文件的所有错误级别的标记
  const errorMarkers = monaco.editor.getModelMarkers({ resource: currentModel.uri })
    .filter(marker => marker.severity === monaco.MarkerSeverity.Error);

  // 更新行号栏错误标记
  updateErrorGutterMarkers(errorMarkers, editor, monaco);
});

步骤3：实现行号栏感叹号装饰器 #

首先注册装饰器样式，然后根据错误列表动态生成行号标记：

// 写在handleEditorMount函数内，装饰器类型全局只需要注册一次
const ERROR_GUTTER_DECORATION = 'error-line-gutter';
monaco.editor.defineDecorationType(ERROR_GUTTER_DECORATION, {
  gutterIconSize: 'contain',
  // 这里用内置base64红色感叹号图标，你可以替换为自己的UI图标
  gutterIconPath: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMkM0LjY4NjI5IDIgMiA0LjY4NjI5IDIgOEMyIDExLjMxMzcgNC42ODYyOSAxNCA4IDE0QzExLjMxMzcgMTQgMTQgMTEuMzEzNyAxNCA4QzE0IDQuNjg2MjkgMTEuMzEzNyAyIDggMlpNOC41IDVIMTdWOUg4LjVWNVpNOC41IDExSDE3VjEzSDguNVYxMVoiIGZpbGw9IiNGRjM1MzUiLz4KPC9zdmc+',
});

const updateErrorGutterMarkers = (errors, editor, monaco) => {
  // 生成装饰器配置
  const decorations = errors.map(error => ({
    range: new monaco.Range(error.startLineNumber, 1, error.startLineNumber, 1),
    options: {
      isWholeLine: true,
      gutterClassName: ERROR_GUTTER_DECORATION,
      // 鼠标悬浮在感叹号上时展示错误信息
      hoverMessage: { value: error.message }
    }
  }));

  // 清除旧的错误标记，替换为新生成的标记
  const oldDecorations = editor.getDecorationsByType(ERROR_GUTTER_DECORATION)?.map(d => d.id) || [];
  editor.deltaDecorations(oldDecorations, decorations);
}

可选优化 #

如果需要同时展示警告级别的标记，额外注册一个黄色感叹号的装饰器类型，筛选Marker时增加monaco.MarkerSeverity.Warning的判断即可。

• 该实现适用于@monaco-editor/react v4+、对应monaco-editor v0.30+版本，是目前主流使用的版本范围
• 装饰器会跟随编辑器实例自动销毁，不需要手动做释放处理
• 如果你的项目是多文件切换的编辑器，切换文件时可以主动调用一次updateErrorGutterMarkers刷新标记

内容的提问来源于stack exchange，提问作者Mohammad Reza Hosainy