https://github.com/justinribeiro/vscode-polymer2-snippets
LitElement, Polymer v2/v3, and Web Components code snippets for Visual Studio Code.
https://github.com/justinribeiro/vscode-polymer2-snippets
lit-html polymer visual-studio vscode-extension
Last synced: over 1 year ago
JSON representation
LitElement, Polymer v2/v3, and Web Components code snippets for Visual Studio Code.
- Host: GitHub
- URL: https://github.com/justinribeiro/vscode-polymer2-snippets
- Owner: justinribeiro
- License: mit
- Created: 2017-05-24T02:12:24.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-18T21:42:49.000Z (almost 6 years ago)
- Last Synced: 2025-02-23T15:06:53.278Z (over 1 year ago)
- Topics: lit-html, polymer, visual-studio, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=justinribeiro.Polymer2Snippets
- Size: 45.9 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# LitElement, Polymer v2 / v3, and Web Components Snippets for Visual Studio Code
This extension for Visual Studio Code adds snippets for LitElement and Polymer v2/v3 for JavaScript and HTML.
[](https://marketplace.visualstudio.com/items?itemName=justinribeiro.Polymer2Snippets) [](https://marketplace.visualstudio.com/items?itemName=justinribeiro.Polymer2Snippets)
## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.
### JavaScript Snippets
```javascript
p-polymer-element // Polymer 3 Web Component definition
p-lit-element // LitElement Web Component definition
p-hybridbehaviors // Polymer.mixinBehaviors()
p-lifecycle-constructor // constructor()
p-lifecycle-connected // connectedCallback()
p-lifecycle-disconnected // disconnectedCallback()
p-lifecycle-attrchanged // attributeChangedCallback()
p-lifecycle-ready // Polymer specific ready()
p-dispatchevent // Fire custom event with this.dispatchEvent();
p-dispatchevent-composed // Fire custom event through ShadowDOM
p-observers // Polymer static get observers()
p-properties // Polymer static get properties()
p-property-basic // Polymer property w/type + default value
p-property-observer // Polymer property w/type + default value + observer
p-property-computed // Polymer property w/type + computed
p-property-all // Polymer property with everything
p-mixin // ES6 arrow function subclass return
p-mixin-dedup // Sharable mixin utilizing Polymer's dedupingMixin
l-element // LitElement Web Component definition (alias p-lit-element)
l-render-html // LitElement render() with html``
l-render-svg // LitElement render() with svg``
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;`
```
### HTML Snippets
```html
p-webcomponent // Boilerplate Polymer 2 Web Component
p-mixin // Boilerplate Polymer 2 mixin class
p-mixin-dedup // Boilerplate Polymer 2 mixin class utilizing Polymer.dedupingMixin()
p-slot //
p-dom-repeat-inside // dom-repeat inside Polymer managed template
p-dom-if // dom-if
```
Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (OSX) to activate snippets from within the editor.
## Installation
1. Install Visual Studio Code 1.10.0 or higher
2. Launch Code
3. From the command palette `Ctrl`-`Shift`-`P` (Windows, Linux) or `Cmd`-`Shift`-`P` (OSX)
4. Select `Install Extension`
5. Choose the extension
6. Reload Visual Studio Code