tooling-setup

# Tooling Setup for React 19 Projects

Production-ready configuration for modern frontend tooling with Vite, TypeScript, Biome, and Vitest.

## 1. Vite + React 19 + React Compiler

```typescript
// 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.

## 2. TypeScript (strict + bundler mode)

```json
// 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 Vite
- `strict: true` - Enable all strict type checks
- `noUncheckedIndexedAccess: true` - Safer array/object access
- `verbatimModuleSyntax: true` - Explicit import/export

## 3. Biome (formatter + linter)

```bash
npx @biomejs/biome init
npx @biomejs/biome check --write .
```

```json
// biome.json
{
  "formatter": { "enabled": true, "lineWidth": 100 },
  "linter": {
    "enabled": true,
    "rules": {
      "style": { "noUnusedVariables": "error" }
    }
  }
}
```

**Usage:**
- `npx biome check .` - Check for issues
- `npx biome check --write .` - Auto-fix issues
- Replaces ESLint + Prettier with one fast tool

## 4. Environment Variables

- Read via `import.meta.env`
- Prefix all app-exposed vars with `VITE_`
- Never place secrets in the client bundle

```typescript
// Access environment variables
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.D