Monaco editor - linting errors customization with warning/error icons

Question

I've been previously using CodeMirror editor in my project, but recently I have decided to switch to Monaco editor.

Now I am trying to provide my users with all the functionalities they had previously (+ additional ones provided by Monaco), and therefore I would like to provide them with similar way of showing linting warnings/errors.

Is there some way to achieve CodeMirror like way of showing errors, with use of icons in Monaco editor?

Answer 1

Ok, I've figured it out.

First I get the errors through some external source (I use JSHINT). Then I modify the decoration:

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)

The classes errorIcon, and 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;
}