VSCode extension with helpful code snippets for SolidJS.
Available on:
Trigger | Content | Languages |
---|---|---|
JSX | ||
sinput→ |
Input two-way binding | jsx, tsx |
Toggle Code Snippet```tsx ${3:setValue}(e.currentTarget.value)}/> ``` | ||
Component | ||
scomp→ |
Base for an empty solidJS component | jsx |
Toggle Code Snippet```tsx function ${1:${TM_FILENAME_BASE}}() { return (${1:${TM_FILENAME_BASE}}
);
}
export default ${1:${TM_FILENAME_BASE}};
```
| ||
scomp→ |
Solid empty function component | tsx |
Toggle Code Snippet```tsx const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => { $0 return ; }; ``` | ||
spcomp→ |
Solid empty Parent Component | tsx |
Toggle Code Snippet```tsx const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => { $0 return{props.children} ;
};
```
| ||
sfcomp→ |
Solid empty Flow Component | tsx |
Toggle Code Snippet```tsx const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => { $0 return{props.children} ;
};
```
| ||
svcomp→ |
Solid empty Void Component | tsx |
Toggle Code Snippet```tsx const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => { $0 return ; }; ``` | ||
scompi→ |
Solid empty function component. With Imports | tsx |
Toggle Code Snippet```tsx import { Component } from "solid-js"; const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => { $0 return ; }; ``` | ||
scompie→ |
Solid empty function component. With Imports and default export | tsx |
Toggle Code Snippet```tsx import { Component } from "solid-js"; const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => { $0 return ; }; export default ${1:${TM_FILENAME_BASE}}; ``` | ||
spcompi→ |
Solid empty Parent Component. With Imports | tsx |
Toggle Code Snippet```tsx import { ParentComponent } from "solid-js"; const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => { $0 return{props.children} ;
};
```
| ||
sfcompi→ |
Solid empty Flow Component. With Imports | tsx |
Toggle Code Snippet```tsx import { FlowComponent, JSX } from "solid-js"; const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => { $0 return{props.children} ;
};
```
| ||
svcompi→ |
Solid empty Void Component. With Imports | tsx |
Toggle Code Snippet```tsx import { VoidComponent } from "solid-js"; const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => { $0 return ; }; ``` | ||
shtmlcomp→ |
Component extending an HTML Element | tsx |
Toggle Code Snippet```tsx const ${1:${TM_FILENAME_BASE}}: ParentComponent< ComponentProps<"${2:div}"> & { $0 } > = (props) => { const [local, attrs] = splitProps(props, []); return <${2:div} {...attrs}>{props.children}${2:div}>; }; ``` | ||
shtmlcompi→ |
Component extending an HTML Element. With Imports | tsx |
Toggle Code Snippet```tsx import { ParentComponent, splitProps, ComponentProps } from "solid-js"; const ${1:${TM_FILENAME_BASE}}: ParentComponent< ComponentProps<"${2:div}"> & { $0 } > = (props) => { const [local, attrs] = splitProps(props, []); return <${2:div} {...attrs}>{props.children}${2:div}>; }; ``` | ||
Context | ||
sctxp→ |
Solid Context Provider component | jsx |
Toggle Code Snippet```tsx import { createContext, createSignal, useContext } from "solid-js"; const ${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context = createContext(); export function ${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Provider(props) { const [${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}] = createSignal(props.${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i} || ""), store = [${TM_FILENAME_BASE/(.*?)\Context.*/${1:/downcase}/i}, set${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}]; return ( <${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context.Provider value={store}>{props.children}${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context.Provider> ); } export function use${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}() { return useContext(${TM_FILENAME_BASE/(.*?)\Context.*/${1:/capitalize}/i}Context); } ``` | ||
sctxp→ |
Solid Context Provider component | tsx |
Toggle Code Snippet```tsx import { createContext, useContext, ParentComponent } from "solid-js"; import { createStore } from "solid-js/store"; const defaultState = {}; const ${1:Name}Context = createContext<[state: typeof defaultState, actions: {}]>([ defaultState, {}, ]); export const ${1/(.*)/${1:/capitalize}/}Provider: ParentComponent = (props) => { const [state, setState] = createStore(defaultState); return ( <${1/(.*)/${1:/capitalize}/}Context.Provider value={[state, {}]}> {props.children} ${1/(.*)/${1:/capitalize}/}Context.Provider> ); }; export const use${1/(.*)/${1:/capitalize}/} = () => useContext(${1/(.*)/${1:/capitalize}/}Context); ``` | ||
Reactivity | ||
ssig→ |
Simple createSignal | ts, tsx, js, jsx |
Toggle Code Snippet```tsx const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2}); ``` | ||
seff→ |
Simple createEffect | ts, tsx, js, jsx |
Toggle Code Snippet```tsx createEffect(() => { const value = ${1:source}(); $0 }); ``` | ||
seffon→ |
createEffect with explicit sources | ts, tsx, js, jsx |
Toggle Code Snippet```tsx createEffect(on(${1: source}, (value, prev) => { $0 })); ``` | ||
smemo→ |
Simple createMemo | ts, tsx, js, jsx |
Toggle Code Snippet```tsx const ${1:value} = createMemo(() => $0); ``` | ||
smemoon→ |
createMemo with explicit sources | ts, tsx, js, jsx |
Toggle Code Snippet```tsx const ${1:value} = createMemo(on(${2:value}, (value, prev) => $0)); ``` |
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)
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
# 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