solid-snippets icon indicating copy to clipboard operation
solid-snippets copied to clipboard

Published 20 hours ago • verified publisher icon solidjs-community
→

Metadata

VSCode extension with helpful code snippets for SolidJS.

Solid Snippets

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 
<input type="${1:text}" value={${2:value}()} onInput={e => ${3:setValue}(e.currentTarget.value)}/>

Component

scomp→ Base for an empty solidJS component jsx
Toggle Code Snippet 

 function ${1:${TM_FILENAME_BASE}}() {

  return (
    <div>${1:${TM_FILENAME_BASE}}</div>
  );
}
  export default ${1:${TM_FILENAME_BASE}};
scomp→ Solid empty function component tsx
Toggle Code Snippet 
const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
  $0
  return <div></div>;
};
spcomp→ Solid empty Parent Component tsx
Toggle Code Snippet 
const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
  $0
  return <div>{props.children}</div>;
};
sfcomp→ Solid empty Flow Component tsx
Toggle Code Snippet 
const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
  $0
  return <div>{props.children}</div>;
};
svcomp→ Solid empty Void Component tsx
Toggle Code Snippet 
const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
  $0
  return <div></div>;
};
scompi→ Solid empty function component. With Imports tsx
Toggle Code Snippet 
import { Component } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
  $0
  return <div></div>;
};
scompie→ Solid empty function component. With Imports and default export tsx
Toggle Code Snippet 
import { Component } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: Component<{$2}> = (props) => {
  $0
  return <div></div>;
};

export default ${1:${TM_FILENAME_BASE}};
spcompi→ Solid empty Parent Component. With Imports tsx
Toggle Code Snippet 
import { ParentComponent } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: ParentComponent<{$2}> = (props) => {
  $0
  return <div>{props.children}</div>;
};
sfcompi→ Solid empty Flow Component. With Imports tsx
Toggle Code Snippet 
import { FlowComponent, JSX } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: FlowComponent<{$2}, ${3:JSX.Element}> = (props) => {
  $0
  return <div>{props.children}</div>;
};
svcompi→ Solid empty Void Component. With Imports tsx
Toggle Code Snippet 
import { VoidComponent } from "solid-js";

const ${1:${TM_FILENAME_BASE}}: VoidComponent<{$2}> = (props) => {
  $0
  return <div></div>;
};
shtmlcomp→ Component extending an HTML Element tsx
Toggle Code Snippet 
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 
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 
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 
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 
const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = createSignal(${2});
seff→ Simple createEffect ts, tsx, js, jsx
Toggle Code Snippet 
createEffect(() => {
  const value = ${1:source}();
  $0
});
seffon→ createEffect with explicit sources ts, tsx, js, jsx
Toggle Code Snippet 
createEffect(on(${1: source}, (value, prev) => {
  $0
}));
smemo→ Simple createMemo ts, tsx, js, jsx
Toggle Code Snippet 
const ${1:value} = createMemo(() => $0);
smemoon→ createMemo with explicit sources ts, tsx, js, jsx
Toggle Code Snippet 
const ${1:value} = createMemo(on(${2:value}, (value, prev) => $0));

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

← Metadata

29
Stars
2
Forks
Watchers

Owner

verified publisher icon solidjs-community

Metadata

VSCode extension with helpful code snippets for SolidJS.

Back