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
React Function Component
Prefix
Key Binding
Description
rfc
cmd+1 or ctrl+1
Inserts a React Function Component snippet
React Arrow Function Component
Prefix
Key Binding
Description
raf
cmd+2 or ctrl+2
Inserts a React Arrow Function Component snippet
Server Action Form
Prefix
Key Binding
Description
saf
cmd+3 or ctrl+3
Inserts a Server Action Form snippet
React Router
Prefix
Key Binding
Description
rrc
cmd+5 or ctrl+5
Inserts a React Router Component snippet
Tanstack Query
Prefix
Key Binding
Description
tq
cmd+6 or ctrl+6
Inserts a Tanstack Query snippet
TSX
React Function Component
Prefix
Key Binding
Description
rfc
cmd+1 or ctrl+1
Inserts a React function component.
React Function Component
Prefix
Key Binding
Description
rfcp
cmd+shift+1 or ctrl+shift+1
Inserts a function component with properties.
React Arrow Function Component
Prefix
Key Binding
Description
raf
cmd+2 or ctrl+2
Inserts a React arrow function component.
React Arrow Function Component
Prefix
Key Binding
Description
rafp
cmd+shift+2 or ctrl+shift+2
Inserts a React arrow function component with properties.
Server Action Form
Prefix
Key Binding
Description
saf
cmd+3 or ctrl+3
Inserts a Server Action Form snippet
React Router
Prefix
Key Binding
Description
rrc
cmd+5 or ctrl+5
Inserts a React Router Component snippet
Tanstack Query
Prefix
Key Binding
Description
tqe
cmd+6 or ctrl+6
Inserts a Tanstack Query snippet
JavaScript
Form Actions Function
Prefix
Key Binding
Description
faf
cmd+4 or ctrl+4
Form actions function
TypeScript
Form Actions Function
Prefix
Key Binding
Description
faf
cmd+4 or ctrl+4
Form actions function
Shared
Console Log
Prefix
Key Binding
Description
clog
cmd+; or ctrl+;
Wrap the selected content in a console.log file.
Console Error
Prefix
Key Binding
Description
cerr
cmd+' or ctrl+'
Wrap the selected content in a console.error file.
Route
Prefix
Key Binding
Description
srh
cmd+7 or ctrl+7
Utility for creating routes on the server.
Drizzle
Prefix
Key Binding
Description
dcfg
cmd+8 / ctrl+8
Drizzle Kit Config.
Prisma
Prefix
Key Binding
Description
pcfg
cmd+9 / ctrl+9
Prisma configuration file.
JSX / HTML
Scaffolding HTML
Prefix
Key Binding
Description
base
null
Creates a basic HTML scaffold
Scaffolding JSX
Prefix
Key Binding
Description
jsx
null
Creates a basic HTML scaffold with JSX setup.
JSON
Biome Config
Prefix
Key Binding
Description
bio
cmd+0 or ctrl+0
Inserts the default biome design settings.
Server Scripts
Prefix
Key Binding
Description
psc
null
Server scripts with Biome, and Bun.
Issues
If you find any issues, please open an issue on the GitHub repository.
