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.
6. Navigation
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.
