javascript - Monaco-editor - anpassning av lint-fel med varnings-/felflaggor


Jag har tidigare använt CodeMirror-editor i mitt projekt, men nyligen har jag bestämt mig för att byta till Monaco-editor.

Nu försöker jag ge mina användare alla funktioner de hade tidigare (+ ytterligare funktioner som tillhandahålls av Monaco), och därför skulle jag vilja ge dem ett liknande sätt att visa lintningsvarningar/fel.

Svar #1

Okej, jag har listat ut det.

Först får jag felen genom någon extern källa (jag använder JSHINT). Sedan ändrar jag dekorationen:

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)

Klasserna errorIcon och 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;
}