solid-snippets
solid-snippets copied to clipboard
VSCode extension with helpful code snippets for SolidJS.
Solid Snippets
VSCode extension with helpful code snippets for SolidJS.
Available on:
Snippets
Trigger | Content | Languages |
---|---|---|
JSX | ||
sinput→ |
Input two-way binding | jsx, tsx |
Toggle Code Snippet
| ||
Component | ||
scomp→ |
Base for an empty solidJS component | jsx |
Toggle Code Snippet
| ||
scomp→ |
Solid empty function component | tsx |
Toggle Code Snippet
| ||
spcomp→ |
Solid empty Parent Component | tsx |
Toggle Code Snippet
| ||
sfcomp→ |
Solid empty Flow Component | tsx |
Toggle Code Snippet
| ||
svcomp→ |
Solid empty Void Component | tsx |
Toggle Code Snippet
| ||
scompi→ |
Solid empty function component. With Imports | tsx |
Toggle Code Snippet
| ||
scompie→ |
Solid empty function component. With Imports and default export | tsx |
Toggle Code Snippet
| ||
spcompi→ |
Solid empty Parent Component. With Imports | tsx |
Toggle Code Snippet
| ||
sfcompi→ |
Solid empty Flow Component. With Imports | tsx |
Toggle Code Snippet
| ||
svcompi→ |
Solid empty Void Component. With Imports | tsx |
Toggle Code Snippet
| ||
shtmlcomp→ |
Component extending an HTML Element | tsx |
Toggle Code Snippet
| ||
shtmlcompi→ |
Component extending an HTML Element. With Imports | tsx |
Toggle Code Snippet
| ||
Context | ||
sctxp→ |
Solid Context Provider component | jsx |
Toggle Code Snippet
| ||
sctxp→ |
Solid Context Provider component | tsx |
Toggle Code Snippet
| ||
Reactivity | ||
ssig→ |
Simple createSignal | ts, tsx, js, jsx |
Toggle Code Snippet
| ||
seff→ |
Simple createEffect | ts, tsx, js, jsx |
Toggle Code Snippet
| ||
seffon→ |
createEffect with explicit sources | ts, tsx, js, jsx |
Toggle Code Snippet
| ||
smemo→ |
Simple createMemo | ts, tsx, js, jsx |
Toggle Code Snippet
| ||
smemoon→ |
createMemo with explicit sources | ts, tsx, js, jsx |
Toggle Code Snippet
|
Contributing
This is an open source project open to everyone. 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 Snippet Generator and Solid Playground to get desired code.
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 the target language:
snippets/
# snippets for "Category Name" category only for .ts and tsx files
Category-Name.ts.json
# "Context" snippets only for .jsx
context.jsx.json
# "Component" snippets only for .tsx
component.tsx.json
# "Component" snippets for both .jsx and .tsx
component.jsx.tsx.json
# universal snippets for all languages (js, jsx, ts, tsx)
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