VSCode WebC

VSCode Syntax Highlighting for WebC templates and components. Works by extending the built-in HTML syntax highlighting.

⚠️ Warning

I don't really know what I'm doing, I'm figuring this out as I go. You probably shouldn't use this.

Feedback and comments

PR's, comments, requests, suggestions are welcome. Please be gentle, this is first thing I've releases to the world.

Detects and highlights:
- WebC attributes webc:*, properties @* and dynamic attributes :*
- YAML, JS & JSON frontmatter.
- HTML, CSS and JS
- Nunjucks
Keeps HTML, CSS & JS formatting and IntelliSense
Basic Nunjucks formatting (if you use Prettier).
Nunjucks snippets
Opinionated Theme webc-dark which will highlight the above (or let you know the scopes to add to your settings).

Search WebC in the Extensions Pane of VSCode and click install. Or check it out in the Marketplace.

Map .webc files to HTML by editing your preferences. You might want to associate .njk files too.

"files.associations": {
  "*.webc": "html",
  "*.njk": "html"
}

Nunjucks formatting is iffy. You get better (but not perfect) results if you use Prettier. We probably need a Prettier plugin.
WebC attributes and properties are wildcards right now. We should probably detect valid/invalid values (maybe when WebC gets to 1.0?)
WebC attributes, properties and dynamic attributes are detected everywhere. Should restrcit this to within html tags: < and >
Strings after properties or attributes are marked as invalid.illegal.character-not-allowed-here needs to detect these properly.
Comments are HTML comments. These may be better as Nunjucks comments? Or can we make Nunjucks support HTML comments?
Comments don't work properly in YAML frontmatter.
Formatting may not be working properly in front-matter