Syntax validation of a custom language in Monaco editor

Question

I'm trying to integrate a custom language to monaco editor and I went through https://microsoft.github.io/monaco-editor/monarch.html to get an idea on syntax highlighting.

But I couldn't find any doc on how we can add error/warning validations through syntax validation for this. In Ace editor we did this by writing a worker and performing validation function within it. Appreciate any links/help on this.

Answer 1

I recently done this successfully i just used monaco-css as boiler-plate and the only thing that i have to do now is write a parser for my language and other features that I want in in it. and here is my code.

Add your parser and other language services in lang_services folder in root dir of project.

I think it would be helpful.

Answer 2

Here is a succinct and easily customizable example that will display an error at position 2-5 of line 1 like so:

Just insert this code at the top (not bottom) of the playground code at https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages:

monaco.editor.onDidCreateModel(function(model) {
    function validate() {
      var textToValidate = model.getValue();

      // return a list of markers indicating errors to display

      // replace the below with your actual validation code which will build
      // the proper list of markers

      var markers = [{
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: 1,
        startColumn: 2,
        endLineNumber: 1,
        endColumn: 5,
        message: 'hi there'
      }];

      // change mySpecialLanguage to whatever your language id is
      monaco.editor.setModelMarkers(model, 'mySpecialLanguage', markers);
    }

    var handle = null;
    model.onDidChangeContent(() => {
      // debounce
      clearTimeout(handle);
      handle = setTimeout(() => validate(), 500);
    });
    validate();
});

// -- below this is the original canned example code:

// Register a new language

Note that for simplicity, this example ignores the consideration that onDidCreateModel and onDidChangeContent both return IDisposable objects which you may need to track and dispose of.