Development Environment Setup

Apart from the basic installation in the Quick Start, you may want better development experience. This page will cover the setup of the development environment, based on VScode or Cursor .

For code linting and formatting, the template uses Prettier and ESLint .

Extension Recommendations

The following extensions are recommended for a better development experience in VScode:

dbaeumer.vscode-eslint: ESlint support.
esbenp.prettier-vscode: Prettier support.
bradlc.vscode-tailwindcss: TailwindCSS support.
unifiedjs.vscode-mdx: MDX support.

Settings for formatting

Add the following settings to your VScode settings.json file:


{
  // General editor preferences
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "always",
    "source.fixAll.eslint": "always",
    "source.organizeImports": "always"
  },
 
  // Use Prettier as the default formatter for all major file types
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
 
  // ESLint integration
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json"
  ],
 
  // Tailwind CSS IntelliSense (optional)
  "tailwindCSS.experimental.classRegex": [
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
 
  // Use workspace TypeScript instead of VS Code built-in version
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
 
  // Set default terminal profile (macOS example)
  "terminal.integrated.defaultProfile.osx": "zsh",
 
  // Enable inline suggestions (ghost text)
  "editor.inlineSuggest.enabled": true
 
  // Optional: Uncomment if you use path aliases like "@/components"
  // "path-intellisense.mappings": { "@": "${workspaceFolder}/src" }
}