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

1. Install Visual Studio Code 1.10.0 or higher
2. Launch VS Code
3. Hit Cmd-Shift-P (macOS) or Ctrl-Shift-P (Windows, Linux)
4. Select Install Extension
5. Choose the extension Lit and Web Components snippets
6. Reload Visual Studio Code

Usage

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

LitElement and lit-html Snippets

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

Stencil Snippets

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

FASTElement Snippets

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	whenfor conditional rendering

Web Components Snippets

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

Using NgRx or Angular material 🤔

• Check out:
  • NgRx Snippets
  • Angular Material Snippets