Syntax validation of a custom language in Monaco editor
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.
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.