Solid Snippets
VSCode extension with helpful code snippets for SolidJS.
Snippets
Prefix | Name | Description | Languages |
---|---|---|---|
Component |
|||
scomp |
Solid Functional Component | Base for an empty solid.js component | JS |
scontext |
Solid Context Component | Base for a createContext() component | JS |
shtmlcomp |
Component extending an HTML Element | Component extending an HTML Element | TS |
Effect |
|||
seff |
Simple createEffect | Simple createEffect | TS & JS |
seffon |
createEffect with explicit sources | createEffect with explicit sources | TS & JS |
Jsx |
|||
sinput |
Input two-way binding | Input two-way binding | TS & JS |
Contributing
This is an open source project open to everyone of SolidJS community. Contributions are welcome. (github)
If you are contributing a snippet, please read about the naming convention below and update only the snippet files. (readme and package.json are updated automatically) You can use a Snipper Generator and Solid Playground to get the code right.
Downloading and installing the repository isn’t required to work on snippets. But if you want to test your changes before commiting, we use a pnpm package manager. Once node modules are installed, you can use CLI Scripts to build and install locally built extension. (You might have to reload your vscode window to apply extension update)
Naming Convention
When creating new snippets, please name the files with according suffix representing target language:
snippets/
# snippet only for typescript
component.ts.json
# snippet only for javascript
component.js.json
# universal snippet for both languages
effect.json
CLI Scripts
# update snippets table & package.json config
pnpm run update-snippets
# update snippets & build extension package
pnpm run build
# install built extension package
pnpm run install-extension