Monaco 编辑器 - 使用 warning/error 图标定制 linting 错误

Question

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

现在我正在尝试为我的用户提供他们以前拥有的所有功能（+ Monaco 提供的其他功能），因此我想为他们提供类似的显示 linting 的方式 warnings/errors。

在 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)

类错误图标和警告图标：

 .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;
}

Monaco 编辑器 - 使用 warning/error 图标定制 linting 错误

Monaco editor - linting errors customization with warning/error icons

javascript

icons

lint

monaco-editor

visual-studio-monaco