A collection of code snippets that make a difference in your day-to-day work.
Features
Keyboard shortcuts for code snippets
Snippets for React, React Router, Tanstack Query, Server Action Forms, Debug Logs, and more
Scaffolding for React, React Router, and more
Biome configuration
Caveats
There's a class hack in React! We usually want to refer to CSS classes, but IntelliSense and autocomplete make this a bit complicated. Therefore, we added an attribute class to React to try and get around this problem.
Snippets
Components will inherit the name of the file they are embedded in. The component name will be capitalized to conform to React's naming convention.
The jsx and html scaffolding will inherit the workspace name and will be automatically capitalized.
JSX
Prefix
Key Binding
Description
rfc
cmd+1 or ctrl+1
Inserts a React Function Component snippet
Prefix
Key Binding
Description
raf
cmd+2 or ctrl+2
Inserts a React Arrow Function Component snippet
Prefix
Key Binding
Description
saf
cmd+3 or ctrl+3
Inserts a Server Action Form snippet
TSX
Prefix
Key Binding
Description
rfc
cmd+1 or ctrl+1
Inserts a React Function Component snippet
Prefix
Key Binding
Description
raf
cmd+2 or ctrl+2
Inserts a React Arrow Function Component snippet
Prefix
Key Binding
Description
saf
cmd+3 or ctrl+3
Inserts a Server Action Form snippet
Shared
Prefix
Key Binding
Description
rrc
cmd+4 or ctrl+4
Inserts a React Router Component snippet
Prefix
Key Binding
Description
tq
cmd+5 or ctrl+5
Inserts a Tanstack Query snippet
Prefix
Key Binding
Description
clg
cmd+6 or ctrl+6
Wrap the selected content in a console.log file.
Scaffolding JSX / HTML
Prefix
Key Binding
Description
jsx
cmd+7 or ctrl+7
Inserts a React Router Component snippet
Biome Config
Prefix
Key Binding
Description
bio
cmd+8 or ctrl+8
Inserts the default biome design settings.
Issues
If you find any issues, please open an issue on the GitHub repository.
