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

Question

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

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

有没有办法通过在 Monaco 编辑器中使用图标来实现 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;
}