Eden

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.

Made with ♥︎ by uaibritto