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

// 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)

// 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)

npx @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 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

// 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)

// 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:

npx vitest                    # Run in watch mode
npx vitest run               # Run once
npx vitest --coverage        # Generate coverage report

Package Installation

# 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

{
  "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:

{
  "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