VSCode / Cursor Setup
Learn how to set up VSCode / Cursor / Windsurf for optimal development experience
Dirstarter comes with pre-configured settings for VSCode and Cursor to provide an optimal development experience. This guide will help you set up your editor for maximum productivity.
Recommended Extensions
The project includes a .vscode/extensions.json file that will prompt you to install these extensions when you open the project in VSCode or Cursor. Dirstarter works best with the following extensions:
Biome
Biome is a powerful tool that helps you to format and lint your code. It combines the functionality of Prettier and ESLint in a much more performant way.
Prisma
Prisma extension for VSCode adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense is a powerful tool that helps you to autocomplete Tailwind classes.
Editor Configuration
The repository includes pre-configured settings in .vscode/settings.json that set up:
- Biome settings for formatting and linting
- TypeScript settings
- File associations
Recommended Workflow
For the best development experience:
- Use the integrated terminal to run development commands
- Leverage the Problems panel to quickly find and fix issues
- Use the Source Control panel for Git operations
- Take advantage of the built-in IntelliSense for TypeScript and React
Next Steps
Now that your editor is configured, learn about Formatting & Linting to maintain code quality.
Last updated on