IDE Setup

🔌 Recommended Extensions

The project includes a .vscode/extensions.json file that will prompt you to install recommended extensions when you open the project in VSCode or Cursor.

Essential Extensions

1. Biome

Biome is a powerful formatter, linter, and more for JavaScript and TypeScript projects. It's a high-performance replacement for ESLint and Prettier.

Features:

⚡ Fast formatting and linting
🔧 Automatic code fixes
📏 Consistent code style
🐛 Error detection

Installation:

# VSCode/Cursor Extension ID
biomejs.biome

Download Biome Extension

2. i18n Ally

Powerful internationalization extension for managing translations with autocomplete and inline previews.

Features:

🌍 Translation key autocomplete
👁️ Inline translation previews
🔍 Translation key navigation
📝 Translation editing

Installation:

# VSCode/Cursor Extension ID
lokalise.i18n-ally

Download i18n Ally

⚙️ Editor Configuration

VSCode/Cursor Settings

The repository includes pre-configured settings in .vscode/settings.json:

.vscode/settings.json

{
	"editor.defaultFormatter": "biomejs.biome",
	"editor.formatOnSave": true,
	"editor.formatOnPaste": true,
	"[javascript]": {
		"editor.defaultFormatter": "biomejs.biome",
		"javascript.preferences.importModuleSpecifier": "non-relative"
	},
	"[typescript]": {
		"editor.defaultFormatter": "biomejs.biome",
		"typescript.preferences.importModuleSpecifier": "non-relative"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "biomejs.biome",
		"typescript.preferences.importModuleSpecifier": "non-relative"
	},
	"editor.codeActionsOnSave": {
		"quickfix.biome": "explicit",
		"source.organizeImports.biome": "explicit"
	},
	"i18n-ally.localesPaths": ["messages", "src/i18n"],
	"i18n-ally.enabledFrameworks": ["next-intl"],
	"i18n-ally.keystyle": "nested",
	"search.exclude": {
		"**/node_modules": true
  },
  "i18n-ally.sourceLanguage": "en",
  "[dotenv]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  }
}

📚 Documentation Integration

If you are using Cursor, you can use the Add new doc feature to add the official documentation for key technologies to your Cursor documentation panel.

To enhance your development experience, add official documentation for key technologies to your Cursor documentation panel:

Core Technologies

Technology	Documentation URL	Purpose
Next.js	https://nextjs.org/docs	Core framework features
Drizzle ORM	https://orm.drizzle.team/docs	Database operations
Tailwind CSS	https://tailwindcss.com/docs	Styling and design
Radix UI	https://www.radix-ui.com/docs	UI components
shadcn/ui	https://ui.shadcn.com/docs	Pre-built components
Better Auth	https://better-auth.com/docs	Authentication
Resend	https://resend.com/docs	Email and newsletter
Stripe	https://stripe.com/docs	Payment processing
Zustand	https://zustand-demo.pmnd.rs/	State management
Next-Intl	https://next-intl-docs.vercel.app/	Internationalization
Fumadocs	https://fumadocs.dev/docs	Documentation
React Hook Form	https://react-hook-form.com/docs	Form handling
Zod	https://zod.dev/	Schema validation

Adding Documentation in Cursor

Open Cursor Settings
Go to the Features tab
Navigate to the Docs panel
Click "+ Add new doc"
Add the documentation URL and name

Having these docs readily available will significantly speed up development by reducing context switching.

On this page