Editor setup

Of course, you can use any IDE you like, but you'll have the best possible developer experience with this starter kit when using a VSCode-based editor with the suggested settings and extensions.

Settings

We've included most recommended settings in the .vscode/settings.json file to make your development experience as smooth as possible. It includes configuration for tools like Prettier, ESLint, and Tailwind CSS, which are used to enforce conventions across the codebase. You can adjust them to your needs.

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }

  ...
}

Extensions

Once you've cloned the project and opened it in VSCode, you should be prompted to install the suggested extensions, which are defined in .vscode/extensions.json. If you'd rather install them manually, you can do so at any time.

These are the extensions we recommend:

ESLint

Global extension for static code analysis. It will help you find and fix problems in your JavaScript/TypeScript code.

Prettier

Global extension for code formatting. It will help you to keep your code clean and consistent.

Pretty TypeScript Errors

Improves TypeScript error messages shown in the editor.

Tailwind CSS IntelliSense

Adds IntelliSense for Tailwind CSS classes to enable autocompletion and linting.