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.DEV
const isProd = import.meta.env.PROD

// .env.local (not committed)
VITE_API_URL=https://api.example.com
VITE_ANALYTICS_ID=UA-12345-1
```

## 5. Testing Setup (Vitest)

```typescript
// 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:**
- Use React Testing Library for DOM assertions
- Use MSW for API mocks (see **tanstack-query** skill for MSW patterns)
- Add `types: ["vitest", "vitest/jsdom"]` for jsdom globals in tsconfig.json

**Run Tests:**
```bash
npx vitest                    # Run in watch mode
npx vitest run               # Run once
npx vitest --coverage        # Generate coverage report
```

## Package Installation

```bash
# 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
```

## Project Scripts

```json
{
  "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 ."
  }
}
```

## IDE Setup

**VSCode Extensions:**
- Biome (biomejs.biome)
- TypeScript (built-in)
- Vite (antfu.vite)

**VSCode Settings:**
```json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}
```

## Related Skills

- **core-principles** - Project structure and best practices
- **react-patterns** - React 19 specific features
- **testing-strategy** - Advanced testing patterns with MSW