This extension for Visual Studio Code adds snippets of HTML and Javascript for LitElement, lit-html, Stencil, FASTElement and Web components.
Have a look at CHANGELOG for the latest changes
- Install Visual Studio Code 1.10.0 or higher
- Launch VS Code
- Hit
Cmd
-Shift
-P
(macOS) orCtrl
-Shift
-P
(Windows, Linux) - Select
Install Extension
- Choose the extension
Lit and Web Components snippets
- Reload Visual Studio Code
Start typing lit-*
and hit enter
, the snippet spreads out or e.g. lit-component
to lcomp
Snippet | Purpose |
---|---|
lit-component |
Basic Lit component |
lit-component-decorator |
Basic Lit component using decorator |
lit-render |
render() |
lit-props |
properties() |
lit-props-decorator |
@property decorator |
lit-styles |
styles() |
lit-ctor |
Add constructor() |
lit-cb |
connectedCallback() life cycle method |
lit-dcb |
disconnectedCallback() life cycle method |
lit-first-updated |
firstUpdated() life cycle method |
lit-updated |
updated() life cycle method |
lit-ce |
Create the custom event using CustomEvent |
lit-conditional-template |
Create conditional template expression |
lit-tmpl-loop |
Iterate templates through map() |
lit-style |
Add styleMap() to the element |
lit-class |
Add classMap() to the element |
lit-should-update |
Implement shouldUpdate life cycle hook |
lit-test-open-wc |
Test case based on @open-wc |
Snippet | Purpose |
---|---|
stencil-component |
Stencil component |
stencil-functional-component |
Stencil functional component |
stencil-prop |
@Prop decorator from Stencil |
stencil-element |
@Element decorator from Stencil |
stencil-event |
@Event decorator from Stencil |
stencil-method-async |
@Method (async) decorator from @stencil/core |
stencil-method-promise |
@Method decorator as returning promise from @stencil/core |
stencil-component-will-load |
@componentWillLoad life cycle hook |
stencil-component-did-load |
@componentDidLoad life cycle hook |
stencil-component-will-render |
@componentWillRender life cycle hook |
stencil-component-did-render |
@componentDidRender life cycle hook |
stencil-component-will-update |
@componentWillUpdate life cycle hook |
stencil-cb |
connectedCallback() from Stencil |
stencil-dcb |
disconnectedCallback() from Stencil |
Snippet | Purpose |
---|---|
fast-component |
Basic FASTElement Component |
fast-cb |
connectedCallback() from FASTElement |
fast-dcb |
disconnectedCallback() from FASTElement |
fast-attr |
@attr decorator |
fast-observable |
@observable decorator |
fast-observable-notify |
Observable.notify(...) |
fast-observable-track |
Observable.track(...) |
fast-dispatch |
$emit to dispatch the custom event |
fast-when |
when for conditional rendering |
Snippet | Purpose |
---|---|
wc |
Basic Web Component |
wc-observed-attrs |
Define observedAttributes |
wc-adopted-cb |
Define adoptedCallback |
wc-attribute-changed-cb |
Define attributeChangedCallback |
wc-slot |
Define <slot> |
wc-slot-named |
Define <slot name="name"> |
- Check out: