Monaco editor - integration with JSHint

Question

Is there any way to integrate monaco editor with a jshint linting tool?

I know that monaco provides a possibility to set up compiler options, but they are not enough for me. For instance, I would like to require semicolons at the end of the statements but can't find a way to do that.

Answer 1

Ok, I have found one way, but I am still thinking if there is a better one.

Basically, I can run the JSHint analysis of my code manually.

jshint.JSHINT(this.code, options, predef)

And afterwards based on the results I can create my custom model markers. Something like:

let errors = jshint.JSHINT.data().errors.map(e => {
        return {
          startLineNumber: e.line,
          startColumn: e.character,
          endLineNumber: e.line,
          endColumn: e.character,
          message: e.raw,
          severity: e.code.startsWith('E') ? monaco.Severity.Error : monaco.Severity.Warning
        }
      })

And set model markers for my editor.

monaco.editor.setModelMarkers(this.editor.getModel(), 'test', errors)

This works, although I still would like to customise the error markers, but maybe there is more natural way of doing it?

Answer 2

If you are looking for a pre-made solution, here is a JS linter for the monaco editor working with jshint : https://github.com/arnaudpfu/monaco-js-linter

First install it :

npm i monaco-js-linter

Then you can integrate the linter like this :

import monaco, { editor } from 'monaco-editor';
import JSMonacoLinter from 'monaco-js-linter';

// The Monaco Editor can be easily created, given an
// empty container and an options literal.
// Two members of the literal are "value" and "language".
// The editor takes the full size of its container.

const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'js code here ...',
    language: 'javascript',
});

const linter = new JSMonacoLinter(editor, monaco);
linter.watch();

Hoping this helps !