monaco-tree-sitter icon indicating copy to clipboard operation
monaco-tree-sitter copied to clipboard

Partial validation through highlighting

Open Darkclainer opened this issue 3 years ago • 1 comments

I was wondering can I use tree sitter with monaco editor to do syntax validation.

Actually, it seems not difficult at all, but there is some problems. First, I exposed last Parser.Tree and queried it on errors then converted errors to monaco.editor.IModelDecoration and used monaco.editor.setModelMarkers. And it seems to work, but only if you enable some language that already support validation (for example javascript) either way marker will be invisible. Turning javascript for language that not actually javascript is problematic, so I didn't use this solution. Also I didn't found how to enable markers for custom language.

But markers anyway not very useful (because generally we can only identify that there was error, not error itself), so we can just use syntax highlight? I mapped ERROR on free simple term like this:

{
  "ERROR": "modifier"
}

and wrote more appropriate style for it:

{
    "modifier": {
        "color": "#ff0000",
        "extraCssStyles": "text-decoration: underline dotted red;"
    }
}

So if we will add new simple token for errors we will be enable to do very simple validation through highlights.

Darkclainer avatar Feb 03 '22 12:02 Darkclainer

I think part of the issue here is this issue:

https://github.com/tree-sitter/tree-sitter/issues/1631

Hopefully tree-sitter will add a way to recover better error messages during parsing.

mtiller avatar Apr 01 '22 18:04 mtiller