Support usage as Language Service for vscode extension

[MeirionHughes]

A long term goal is to have a VS Code plug-in that provides contextual information about HTML templates, and highlight issues arising from bad bindings, bad type usage, etc... etc...

In principle aurelia-template-lint is ideal for such a Service because it is built directly on-top of a standard html parser. By not maintaining a "virtual" DOM and not running Aurelia fully in the background, we can easily cache the linting states and results and reparse the html document sub-trees that have changed. It also means we can pick up issues that would affect the generation of the DOM tree. In principle, keeping things lean and mean should result in quick feedback to the IDE to be reported to the user (underlining, etc...).

Some tasks/research that need to be done:

• [x] find out how to create a language service plug-in for vs-code
  • basic plug-in
  • how to provide a language service vs code can use.
  • how to report errors and show them in the editor (underlining, pop-up message)
• [x] rework template-lint to allow caching of node states/reflection
  • this would allow second-pass rules that require lifting-variables in parents
• [x] support partial invalidation of HTML tree
  • update only invalidated sub-trees
• [x] rework Issues to have a Start and Stop
  • to allow underlining a range.

Any resources that might help (examples/tutorials), feel free to post the link. Feedback that the approach will be generalised enough so it can be used for other IDEs would be welcome.

[Thanood]

Maybe this project helps a bit: https://github.com/Microsoft/vscode-htmlhint Or any other of the available linters but I thought an HTML linter would be close enough to a template linter. :smile:

[MeirionHughes]

Cool thanks;

[atsu85]

@MeirionHughes, keep in mind, that VSCode is just one potential IDE that might use it to create better Aurelia (IDE) plugin - don't add anything VSCode specific there :)

@denofevil has created basic Aurelia plugin AureliaStorm for IntelliJ platform (IDEA/Webstorm IDEs). Writing feature rich plugins for IDEs would become so much easier if there was a service/library that wold do the heavy-lifting for the IDE plugin.

[MeirionHughes]

That is kind of the plan. The next big change here is to add a project-wide management class that maintains information for all files (and aurelia resources). It then lints each html file and reports issues for each. Any IDE plugin then simply needs to feed the file updates to the project-manager and report the issues.

[MeirionHughes]

aurelia project is looking to have a vscode plugin, lead by @eriklieben based on his initial work.

@atsu85 on the most part everything will be generic, so if anyone wants to use the linter on another IDE for feedback there won't be anything hindering them; but commandeering this issue for anything that is needed by @eriklieben

[eriklieben]

@MeirionHughes just a quick heads up: I did a proof of concept to test it out yesterday, to get a break from writing tests for regex and fixing regex code to improve the syntax highlighting:-)

Still not 100% correct, but this is after like an hour of playing around:

It's pretty easy to intergrate, great product!, Had most of the issues, because of typescript definitions that code uses and the default ones for node. Still need to figure out why it didn't return back the issues it finds based on the code behind/ ts code. But probably with a bit more digging I can get this to works, guess it is just some path that is different or something like that.

My guess is that it would be just as easy to intergrate into other editors.

[MeirionHughes]

nice! Looking good. :)

I'm in the middle of reworking this project a little bit so that it can track all the project files and all the issues. see: https://github.com/MeirionHughes/aurelia-template-lint/issues/106

Reporting the start and finish offsets (of file stream) will probably help you a lot.

The idea will be you will watch for file changes then send the files to this lint for updating. the lint then does project wide tracking of resources - I'll be able to finally check the custom components and attributes.

The other thing I want to do it also open up the context tree to you; so you can grab the local context and then be able to do intellisense. :)

[MeirionHughes]

@eriklieben btw, by default the code-behind checking is not enabled. see https://github.com/MeirionHughes/aurelia-template-lint#static-type-checking

Hopefully it will be far more stable after the reworking.