Visual Studio Code extension for adding lit component snippets.
Features
These snippets are opinionated and include common lifecycle hooks, decorators, etc. I've also added a few JSDoc snippets, which are also opinionated.
Snippets
Lit JavaScript
Prefix
Description
| litwc |
Lit Web Component in JavaScript |
| litwclccc |
Lit Web Component Lifecycle: connectedCallback() in JavaScript |
| litwclcdc |
Lit Web Component Lifecycle: disconnectedCallback() in JavaScript |
| litwclcfu |
Lit Web Component Lifecycle: firstUpdated() in JavaScript |
| litwclcu |
Lit Web Component Lifecycle: updated() in JavaScript |
| litwclcr |
Lit Web Component Lifecycle: render() in JavaScript |
| litwcinternalstate |
Lit Web Component Internal Reactive State in JavaScript |
| litwcgetter |
Lit Web Component Getter in JavaScript |
| litwcmethod |
Lit Web Component Method in JavaScript |
Lit JavaScript With JSDoc Annotations
Prefix
Description
| litwcjsdoc |
Lit Web Component in JavaScript with JSDoc Annotations |
| litwcjsdoclccc |
Lit Web Component Lifecycle: connectedCallback() in JavaScript with JSDoc Annotations |
| litwcjsdoclcdc |
Lit Web Component Lifecycle: disconnectedCallback() in JavaScript with JSDoc Annotations |
| litwcjsdoclcfu |
Lit Web Component Lifecycle: firstUpdated() in JavaScript with JSDoc Annotations |
| litwcjsdoclcu |
Lit Web Component Lifecycle: updated() in JavaScript with JSDoc Annotations |
| litwcjsdoclcr |
Lit Web Component Lifecycle: render() in JavaScript with JSDoc Annotations |
| litwcjsdocgetter |
Lit Web Component Getter in JavaScript with JSDoc Annotations |
| litwcjsdocmethod |
Lit Web Component Method in JavaScript with JSDoc Annotations |
JSDoc
I'm sure there are other JSDoc snippets available, but I've included a few within Lit Component Snippets.
Prefix
Description
| jsdoctdobj |
JSDoc TypeDef Object |
| jsdoctd |
JSDoc TypeDef |
| jsdoctypewdesc |
JSDoc Type With Description |
| jsdoctype |
JSDoc Type |
Lit Typescript
Prefix
Description
| litwc |
Lit Web Component in Typescript |
| litwclccc |
Lit Web Component Lifecycle: connectedCallback() in Typescript |
| litwclcdc |
Lit Web Component Lifecycle: disconnectedCallback() in Typescript |
| litwclcfu |
Lit Web Component Lifecycle: firstUpdated() in Typescript |
| litwclcu |
Lit Web Component Lifecycle: updated() in Typescript |
| litwclcr |
Lit Web Component Lifecycle: render() in Typescript |
| litwcgetter |
Lit Web Component Getter in Typescript |
| litwcmethod |
Lit Web Component Method in Typescript |
| litwcinternalstate |
Lit Web Component Internal Reactive State in Typescript |
Contributing
Contributions are welcome! If you have suggestions on additonal snippets reach out and message me on discord. Also, feel free to submit a pull request by adding your snippet(s) to any of the .json files in /snippets.
Run And Test Extension Locally
- Clone repository.
- cd into repository.
- Press F5 to open a new window.
- Create a new file with a file name suffix matching languages, which are .js and .ts.
- Verify that your snippet(s) are proposed on IntelliSense.
Make Changes
- You can relaunch the extension from the debug toolbar after making changes to the /json files in /snippets.
- You can also reload (Ctrl+R or Cmd+R on Mac) the VS Code window with your extension to load your changes.
.png)
3 months ago
2
