摩纳哥编辑器 - 带有警告/错误图标的 linting 错误自定义

Question

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

现在我试图为我的用户提供他们以前拥有的所有功能（+ 摩纳哥提供的附加功能），因此我想为他们提供类似的方式来显示 linting 警告/错误。

是否有某种方法可以通过在摩纳哥编辑器中使用图标来实现 CodeMirror 之类的显示错误的方式？

Answer 1

好的，我已经想通了。

首先，我通过一些外部来源获取错误（我使用 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;
}