Name: 'Compelem'
Author: 'holyhigh2'

A VS Code extension that provides rich editing support for the compelem component framework, especially for the HTML-style markup written inside the `h`...` tag templates of a component's render() function.

Features

1. Syntax Highlighting

The HTML text inside `h`...` functions is highlighted.
The CSS text inside `css`...` template functions is highlighted.
All compelem directive functions (show / ifTrue / ifElse / forEach / when / slot / html / classes / styles / model / bind ...) have individually configurable colors.
When the cursor is on a tag, the matching opening/closing tag name is highlighted.
Paired tags can be folded.

2. Formatting

Right-click formatting of the HTML markup template inside `h`...` functions is supported.
Long tags are broken into one attribute per line; short elements (e.g. <span>Hello</span>) stay on a single line. The result is idempotent.
When you want to keep the built-in TypeScript formatter as the default document formatter, you can use the Compelem: Format h... templates` command.
The number of indentation spaces can be set via compelem.format.indentSize (the default 0 means following the editor's tabSize).

3. IntelliSense & Completion

Typing <l- (or a PascalCase prefix) inside `h`...` functions lists the components registered in the workspace.
Typing . on a component tag lists the component's props — including the properties inherited via extends (e.g. color / size / disabled from a base class) — and shows their type, default value, and @attrs documentation.
Typing an opening tag like <div> automatically inserts </div> and moves the cursor inside the element.
Typing <xx propname= on a component tag automatically inserts "${this.value}".
Typing show / bind / classes / styles / model / html on any tag suggests a tag-directive snippet such as ${show(this.visible)}; inside ${ ... }, text directives (forEach / when / ifTrue / ifElse / slot) are suggested instead.

4. Snippets

render → generates a render() that returns an `h`...` function template containing a root <div>.
@watch → generates an empty @watch(...) method.
@computed → generates an empty @computed getter.

5. Diagnostics

The ref attribute must be an interpolation of a createRef member, e.g. ref="${this.xxRef}".
The .xx directive attribute is only allowed on l-xx or PascalCase components (e.g. <l-input .value="${this.xx}">).
The .native event modifier is only allowed on l-xx components; <div @click.native="..."> is flagged as an error.

Hold Ctrl and click a component tag (l-xx / PascalCase) to jump to its @tag class definition.
Hold Ctrl and click a this.xxx reference to jump to that member's declaration.
Hold Ctrl and click a CSS class to find its .class selector in the style files.
For cross-file lookups, it falls back to VS Code's workspace symbol search.