Web Components Snippets for VS Code

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

Installation

Start typing lit-* and hit enter, the snippet spreads out or e.g. lit-component to lcomp

Use Extension

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">`