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.