So… I got side-tracked while writing a blog post about the WebC migration of my @eleventy powered website and long story short, I created a VS Code extension for WebC instead
It’s super basic for now, providing just the `.webc` to HTML file association and suggestions for WebC-specific HTML attributes including links on hover to the documentation.
I have more plans though, for example linking tags to their respective files so you can Ctrl+Click.
https://marketplace.visualstudio.com/items?itemName=fynn.vscode-webc
It might not look amazing yet, but the prove of concept for Ctrl + clickable WebC component tags is here.
This currently uses VS Code’s document links, which are relatively straightforward to implement, but technically not the correct way to do symbol linking.
So, when I have more time, I’ll dig into the symbol API for extensions, which conveniently lacks any useful documentation / example implementations whatsoever.
I was thinking wrong about this. The VS Code feature we want are not symbols but definitions. Fortunately, definitions are not too hard to implement.
So, the newest extension version comes with support for “Go to Definition” and “Peek Definition”.
The readme also got an upgrade with feature screenshots.
Next up on the to do list would be “Go to References” and “Peek References”. Another cool feature, somewhat related to definitions.
Look at that, basic semantic highlighting for WebC component tags and keyword attributes inspired by Vue’s VS Code extension.
@mvsde
I'm impressed by the amount of boilerplate files D:
@AliveDevil In theory you could remove all of them and write raw JS, that’s totally an option. But TypeScript, linting, automatic changelog, and CI are nice to have. I also just realized I forgot to add Prettier format checking in CI.
@mvsde @eleventy There’s some related tooling within the #webComponentsCG that you might want to check out. @matsuuu for instance and https://github.com/break-stuff do some cool stuff in this space that might be worth teaming up with here!
@mvsde
And asking in the microsoft/vscode repo won’t bear any insights whatsoever.
@mvsde I love this, thank you!!
@mvsde very nice!! this might be tricky, but is there a way to get the highlights to work across spaces in the value, and also highlight dynamic values in backticks?
@d3v1an7 I would love to implement something like that, the Vue extension sets quite the example.
At the moment, the WebC extension is meant as a proof-of-concept. For better syntax highlighting I probably have to look into working with the HTML language service directly instead of using basic “find and match strings” in the text representation.
If only the VS Code extension API documentation wasn’t such a fragmented mess spanning guides, examples, and method listings auto-generated from code.
@mvsde I literally have no more information on this, other than it came up as the first marketplace link when I searched for "webc" to get to yours, but maybe it would be of use? https://github.com/dwkns/vscode-webc (The author seems to have been inactive on GitHub for at least a year.)