Web Components Snippets for VS Code

This extension for Visual Studio Code adds snippets of HTML and Javascript for Lit, Stencil, FASTElement and Web Components.

Have a look at CHANGELOG for the latest changes

Installation

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

Usage

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

Use Extension

Lit Snippets

Snippet	Purpose
`lit-component`	Basic Lit component
`lit-component-decorator`	Basic Lit component using decorator
`lit-render`	render() method from Lit
`lit-props`	properties() method from Lit
`lit-props-decorator`	@property decorator from Lit
`lit-state-decorator`	@state decorator from Lit
`lit-query-decorator`	@query decorator from Lit
`lit-query-all-decorator`	@queryAll decorator from Lit
`lit-query-async-decorator`	@queryAsync decorator from Lit
`lit-query-assigned-elements-decorator`	@queryAssignedElements decorator from Lit
`lit-event-options-decorator`	@eventOptions decorator from Lit
`lit-accessor-property-decorator`	@property decorator using standard accessor syntax
`lit-styles`	styles() method from Lit
`lit-ce-decorator`	@customElement decorator from Lit
`lit-ctor`	Add constructor()
`lit-cb`	connectedCallback() from Lit
`lit-dcb`	disconnectedCallback() from Lit
`lit-first-updated`	firstUpdated() from Lit
`lit-updated`	updated() from Lit
`lit-ce`	Create the custom event
`lit-conditional-template`	Create conditional template expression
`lit-tmpl-loop`	Iterate templates through map()
`lit-repeat`	Render a keyed list with Lit repeat()
`lit-when`	Conditionally render with Lit when()
`lit-if-defined`	Render an attribute only when a value is defined
`lit-until`	Render fallback content until a promise resolves
`lit-cache`	Cache a Lit template
`lit-guard`	Only re-render a template when guard dependencies change
`lit-live`	Use live() for bindings that must read the DOM value
`lit-ref`	Add Lit ref directive
`lit-keyed`	Associate a template with a key
`lit-style`	Add `styleMap()` to the element. Import it from `lit/directives/style-map.js`
`lit-class`	Add `classMap()` to the element. Import it from `lit/directives/class-map.js`
`lit-should-update`	Implement `shouldUpdate` life cycle hook
`lit-test-open-wc`	Test case based on @open-wc
`lit-reactive-controller`	Create a Lit reactive controller
`lit-task`	Create a Lit Labs Task
`lit-task-render`	Render Lit Labs Task states

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/core`
`stencil-event`	@Event decorator from `@stencil/core`
`stencil-method-async`	@Method(async) decorator from `@stencil/core`
`stencil-method-promise`	@Method decorator as returning promise from `@stencil/core`
`stencil-state`	@State decorator from `@stencil/core`
`stencil-watch`	@Watch decorator from `@stencil/core`
`stencil-listen`	@Listen decorator from `@stencil/core`
`stencil-host`	Render with Stencil Host
`stencil-attach-internals`	@AttachInternals decorator from `@stencil/core`
`stencil-form-associated-component`	Stencil form-associated component
`stencil-set-form-value`	Set a form value through ElementInternals
`stencil-prop-mutable`	Mutable @Prop decorator from Stencil
`stencil-prop-reflect`	Reflecting @Prop decorator from Stencil
`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-component-did-update`	componentDidUpdate life cycle hook
`stencil-cb`	connectedCallback() from Stencil
`stencil-dcb`	disconnectedCallback() from Stencil

FASTElement Snippets

Snippet	Purpose
`fast-component`	Basic FASTElement Component
`fast-define`	Define a FASTElement
`fast-template`	Create a typed FAST html template
`fast-styles`	Create FAST css styles
`fast-cb`	connectedCallback() from FASTElement
`fast-dcb`	disconnectedCallback() from FASTElement
`fast-observable`	@observable decorator from FASTElement
`fast-observable-notify`	Observable.notify from FASTElement
`fast-observable-track`	Observable.track from FASTElement
`fast-attr`	@attr decorator from FASTElement
`fast-attr-boolean`	@attr boolean decorator from FASTElement
`fast-attr-from-view`	@attr fromView decorator from FASTElement
`fast-attr-converter`	@attr decorator with a converter
`fast-value-converter`	Create a FAST ValueConverter
`fast-volatile`	@volatile computed property from FASTElement
`fast-dispatch`	Dispatch event using this.$emit
`fast-when`	when directive
`fast-event-binding`	FAST event binding
`fast-property-binding`	FAST property binding
`fast-boolean-binding`	FAST boolean attribute binding
`fast-repeat`	repeat directive
`fast-ref`	ref directive
`fast-slotted`	slotted directive
`fast-children`	children directive

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
`wc-slot-named`	Define with name
`wc-attach-shadow`	Attach a shadow root
`wc-shadow-template`	Render a template into shadow DOM
`wc-when-defined`	Run code after a custom element is defined
`wc-element-internals`	Enable ElementInternals for a form-associated custom element
`wc-dispatch-event`	Dispatch a composed custom event

Using NgRx or Angular material 🤔

Check out:
- NgRx Snippets
- Angular Material Snippets

Web Components Snippets

Hardik Pithva

Web Components Snippets for VS Code

Installation

Usage

Lit Snippets

Stencil Snippets

FASTElement Snippets

Web Components Snippets

Using NgRx or Angular material 🤔