VSCode

[jhechtf]

I'm willing to look into this myself, but I am wondering if there is a way to make a VSCode extension for arrow so that it will highlight HTML inside the html or t tagged template literals. Wanted to keep the discussion somewhere and this didn't particularly seem like an issue as it was more of a curiosity.

[jhechtf]

Okay so today was a weird day at work, so managed to spend some time. There does seem like there is a way, but I'm not 100% on how to start on it. Seems like we would be using embedded language support, but i need to look more into how it works. Might build a simple POC to verify.

[justin-schroeder]

Good question. I would love to have more fine grained control over this too with a first party VSCode extension, buuuut...the lit-html vscode extension does do this well for the "html" tag

[jhechtf]

I think, and again, would need to fudge about with this more, that we could do some injections into the base language (html) and then use the embedded language with those injections.

[jhechtf]

okay so since lit-html extension has a couple of grammars ive borrowed them and stuck them into bare-bones extension. So far, seems to work. What sort of specialization would we look for in this case?

[jhechtf]

If anyone wants to take a look at this very WIP extension, it's over at https://github.com/jhechtf/vscode-arrow-js

[jhechtf]

that's weird. give me a second. I thought I had already put it to public

[jhechtf]

okay, try it now @justin-schroeder

[Chaphasilor]

I just took a look, this is so much nicer than the regular template strings! 😭
Thank you for your efforts, please don't abandon them! I'm using arrow for multiple projects already, and it's awesome to work with (aside from some bugs), so I would love to see better "syntax" support.
Never took a look at lit-html, but I'm guessing it's mostly the same.

What I noticed is that the "arrow function" construct is highlighted in a strange way sometimes:

Other times it works better:

In regular JavaScript however the whole construct seems to have the same color:
Edit: maybe that's just a coincidence, the color of the parentheses probably depends on the nesting level.

Not sure if you could do anything about this? Of course it's not a deal-breaker, but I think the goal is to have the best and most consisten syntax highlighting possible, right? Otherwise we could just keep using lit-html :)

[Chaphasilor]

Oh and one more thing, so far this seems to only be syntax highlighting, but it's not actually telling VS Code that the section within the html template string is a different language, right? That would be awesome!
This actually happens in regular html every time you open a script or style tag, when IntelliSense suggests different things. Same for .vue single-file components. Maybe you want to look into how that's done? 😁

[jhechtf]

Hmm, likely something with the grammar since im "borrowing" the grammer built for Lit. never really dealt with language grammars before so it's all been a bit of a learning experience.