DEV Community


Visual Studio Code extension update for LitElement snippets and new Pack available

justinribeiro profile image Justin Ribeiro Originally published at on ・1 min read

After some delay, I’ve gotten around to releasing v2.0.0 of LitElement, Polymer v2 / v3, and Web Components Snippets for Visual Studio Code. This includes some significant retooling around the LitElement shortcuts which were painfully lacking. This now includes shortcuts like:

l-element // LitElement Web Component definition (alias p-lit-element) l-render-html // LitElement render() with html literal l-render-svg // LitElement render() with svg literal l-firstRendered // LitElement firstRender() l-properties // Lit-Element properties by implementing a static properties getter l-get-styles // Lit-Element styles in a static styles property l-get-styles-super // Lit-Element static styles property with super class l-firstUpdated // Lit-Element firstUpdated() l-shouldUpdate // Lit-Element shouldUpdate() l-requestUpdate // Lit-Element requestUpdate() l-updateComplete // Lit-Element await this.updateComplete;

In addition to this update, I’ve released a new extension pack, LitElement Web Components Extension Pack. This pack includes some mainstays like lit-plugin and my snippets extension, but also includes a fair amount of tooling plugins, such as ESLint and Import Cost among others.

It’s a light pack to say the least, but it hopefully simplifies a lot of things for developers just getting started with LitElement.

Discussion (0)

Editor guide