Use when setting up new projects or updating tool configurations. Configures Vite, TypeScript, Biome, and Vitest for React 19 projects. Covers build configuration, strict TypeScript setup, linting/formatting, and testing infrastructure.
Production-ready configuration for modern frontend tooling with Vite, TypeScript, Biome, and Vitest.
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react({
babel: {
// React Compiler must run first:
plugins: ['babel-plugin-react-compiler'],
},
}),
],
})
Verify: Check DevTools for "Memo ✨" badge on optimized components.
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"strict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"noFallthroughCasesInSwitch": true,
"types": ["vite/client", "vitest"]
},
"include": ["src", "vitest-setup.ts"]
}
Key Settings:
moduleResolution: "bundler" - Optimized for Vitestrict: true - Enable all strict type checksnoUncheckedIndexedAccess: true - Safer array/object accessverbatimModuleSyntax: true - Explicit import/exportnpx @biomejs/biome init
npx @biomejs/biome check --write .
// biome.json
{
"formatter": { "enabled": true, "lineWidth": 100 },
"linter": {
"enabled": true,
"rules": {
"style": { "noUnusedVariables": "error" }
}
}
}
Usage:
npx biome check . - Check for issuesnpx biome check --write . - Auto-fix issuesimport.meta.envVITE_// Access environment variables
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD
// .env.local (not committed)
VITE_API_URL=https://api.example.com
VITE_ANALYTICS_ID=UA-12345-1
// vitest-setup.ts
import '@testing-library/jest-dom/vitest'
// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
setupFiles: ['./vitest-setup.ts'],
coverage: { reporter: ['text', 'html'] }
}
})
Setup Notes:
types: ["vitest", "vitest/jsdom"] for jsdom globals in tsconfig.jsonRun Tests:
npx vitest # Run in watch mode
npx vitest run # Run once
npx vitest --coverage # Generate coverage report
# Core
pnpm add react@rc react-dom@rc
pnpm add -D vite @vitejs/plugin-react typescript
# Biome (replaces ESLint + Prettier)
pnpm add -D @biomejs/biome
# React Compiler
pnpm add -D babel-plugin-react-compiler
# Testing
pnpm add -D vitest @testing-library/react @testing-library/jest-dom
pnpm add -D @testing-library/user-event jsdom
pnpm add -D msw
# TanStack
pnpm add @tanstack/react-query @tanstack/react-router
pnpm add -D @tanstack/router-plugin @tanstack/react-query-devtools
# Utilities
pnpm add axios zod
{
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"preview": "vite preview",
"test": "vitest",
"test:run": "vitest run",
"test:coverage": "vitest --coverage",
"lint": "biome check .",
"lint:fix": "biome check --write .",
"format": "biome format --write ."
}
}
VSCode Extensions:
VSCode Settings:
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
}
}