Solid Snippets

Solid Snippets

VSCode extension with helpful code snippets for SolidJS.

GET THE EXTENSION

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

GitHub

View Github