Editor setup
Learn how to set up your editor for the fastest development experience.
Of course you can use every IDE you like, but you will have the best possible developer experience with this starter kit when using VSCode-based editor with the suggested settings and extensions.
Settings
We have included most recommended settings in the .vscode/settings.json
file to make your development experience as smooth as possible. It include mostly configs for tools like Prettier, ESLint and Tailwind which are used to enforce some conventions across the codebase. You can adjust them to your needs.
LLM rules
We exposed a special endpoint that will scan all the docs and return the content as a text file which you can use to train your LLM or put in a prompt. You can find it at /api/llms.txt.
The repository also includes a custom rules for most popular AI editors to ensure that AI completions are working as expected and following our conventions.
Cursor
If you're using Cursor, we've integrated specific rules that help maintain code quality and ensure AI-assisted completions align with our project standards.
You can find them in the .cursor
directory at the root of the project. It includes multiple .mdc
files which can be used to instruct the AI to follow our conventions when generating code.
To learn more about Cursor rules check out the official documentation.
Windsurf
For Windsurf users we have included a custom rules file that can be used to instruct the AI to follow our conventions when generating code.
You can find the rules in the .windsurfrules
file at the root of the project.
To learn more about Windsurf rules check out the official documentation.
Extensions
Once you cloned the project and opened it in VSCode you should be promted to install suggested extensions which are defined in the .vscode/extensions.json
automatically. In case you rather want to install them manually you can do so at any time later.
These are the extensions we recommend:
ESLint
Global extension for static code analysis. It will help you to find and fix problems in your JavaScript code.
Download ESLint
marketplace.visualstudio.com
Prettier
Global extension for code formatting. It will help you to keep your code clean and consistent.
Download Prettier
marketplace.visualstudio.com
Pretty TypeScript Errors
Improves TypeScript error messages in the editor.
Download Pretty TypeScript Errors
marketplace.visualstudio.com
Tailwind CSS IntelliSense
Adds IntelliSense for Tailwind CSS classes to enable autocompletion and linting.
Download Tailwind CSS IntelliSense
marketplace.visualstudio.com
How is this guide?
Last updated on