mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

348K
active users

Fynn Ellie Becker

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.

marketplace.visualstudio.com/i

marketplace.visualstudio.comWebC for VS Code - Visual Studio MarketplaceExtension for Visual Studio Code - Language support for the WebC template language

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.

github.com/mvsde/vscode-webc/r

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.

github.com/mvsde/vscode-webc

GitHubGitHub - mvsde/vscode-webc: VS Code language support for the WebC template languageVS Code language support for the WebC template language - mvsde/vscode-webc

Look at that, basic semantic highlighting for WebC component tags and keyword attributes inspired by Vue’s VS Code extension.

github.com/mvsde/vscode-webc#s

@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 that you might want to check out. @matsuuu for instance and github.com/break-stuff do some cool stuff in this space that might be worth teaming up with here!

GitHubbreak-stuff - Overviewbreak-stuff has 58 repositories available. Follow their code on GitHub.

@mvsde
And asking in the microsoft/vscode repo won’t bear any insights whatsoever.

@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? github.com/dwkns/vscode-webc (The author seems to have been inactive on GitHub for at least a year.)

GitHubGitHub - dwkns/vscode-webc: VSCode Extension for WebC filesVSCode Extension for WebC files. Contribute to dwkns/vscode-webc development by creating an account on GitHub.