logo标签列表

Monaco编辑器 - 使用警告/错误图标自定义Linting错误

javascripticonslintmonaco-editorvisual-studio-monaco
6

我之前在我的项目中一直使用CodeMirror编辑器，但最近我决定切换到Monaco编辑器。

现在我正在尝试为我的用户提供他们以前拥有的所有功能（+由Monaco提供的其他功能），因此我希望为他们提供类似于显示linting警告/错误的方式。

enter image description here 是否有一种方法可以通过使用Monaco编辑器中的图标来实现类似于CodeMirror的显示错误的方式？

1个回答
6

好的，我已经弄清楚了。

enter image description here

首先，我通过某些外部来源（我使用JSHINT）获取错误信息。然后，我修改了修饰内容：

let newDecorations = errors.map(e => {
      return {
        range: new monaco.Range(e.startLineNumber, 1, e.startLineNumber, 1),
        options: {
          glyphMarginClassName: e.severity === monaco.Severity.Error ? 'errorIcon' : 'warningIcon',
          glyphMarginHoverMessage: {value: e.message}
        }
      }
    })

    this.decorations = this.editor.deltaDecorations(this.decorations, newDecorations)

类名errorIcon和warningIcon：
 .warningIcon {
  display: block;
  background-image: url('../assets/icons/warningIcon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.errorIcon {
  display: block;
  background-image: url('../assets/icons/errorIcon.png');
  background-size: contain;
  background-repeat: no-repeat;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接