Code Quality Management

Code Quality Management

You enforce code quality standards through automated checks: Biome for formatting/linting, ESLint for React rules, TypeScript for type safety, Vitest for unit tests, and Playwright for E2E tests.

Quality Gates Workflow

Copy this checklist and track your progress:

Quality Gates Sequence:
- [ ] Step 1: Format code (Biome)
- [ ] Step 2: Lint code (ESLint + TypeScript)
- [ ] Step 3: Type check (TypeScript)
- [ ] Step 4: Run unit tests (Vitest)
- [ ] Step 5: Run E2E tests (Playwright)

All-in-one quality check:

npm run lint && npm run type-check && npm run test

Quick Start

Install dependencies

npm install -D @biomejs/biome eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install -D eslint-plugin-react-hooks eslint-plugin-react-refresh
npm install -D husky lint-staged vitest @playwright/test

Configure package.json scripts

{
  "scripts": {
    "build": "vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext ts,tsx --fix",
    "lint:ci": "eslint . --ext ts,tsx --max-warnings 0",
    "format": "biome format --write .",
    "format:check": "biome format --write --dry-run .",
    "type-check": "tsc --noEmit",
    "test": "vitest run",
    "test:coverage": "vitest run --coverage",
    "test:e2e": "playwright test",
    "test:e2e:ui": "playwright test --ui",
    "prepare": "husky"
  }
}

Setup Biome

Create biome.json:

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": { "useImportType": "error", "useConst": "error" },
      "suspicious": { "noExplicitAny": "warn" },
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      }
    }
  },
  "formatter": { "enabled": true }
}

See BIOME.md for advanced configuration and import organization.

Setup ESLint

Create .eslintrc.cjs:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-explicit-any': 'warn',
    'react-hooks/rules-of-hook': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
};

See ESLINT.md for React-specific rules and customization.

Setup TypeScript

Use strict mode in tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["vite/client"]
  },
  "include": ["src"]
}

See TYPESCRIPT.md for advanced configuration and optimization.

Setup Pre-commit Hooks

npx husky init

Update .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint:ci

Create .lintstagedrc.json:

{
  "*.{ts,tsx}": [
    "biome check --write --no-errors-on-unmatched",
    "eslint --ext .ts,.tsx --fix --no-error-on-unmatched"
  ],
  "*.{js,jsx}": [
    "biome check --write --no-errors-on-unmatched",
    "eslint --fix --no-error-on-unmatched"
  ],
  "*.json": ["biome check --write"],
  "package.json": ["prettier --write"]
}

See PRE-COMMIT.md for advanced hook configuration and commit message linting.

Setup Testing

Vitest (vitest.config.ts):

import { defineConfig } from 'vitest/config';
import path from 'path';
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: { provider: 'v8', reporter: ['text', 'html', 'lcov'] },
  },
  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
});

Playwright (playwright.config.ts):

import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  reporter: 'html',
  use: { baseURL: 'http://localhost:4173', trace: 'on-first-retry' },
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:4173',
    timeout: 120000,
  },
});

See TESTING.md for comprehensive test setup, coverage configuration, and E2E best practices.

Daily Workflow

Copy and track this checklist:

Daily Development:
- [ ] Format during development: npm run format
- [ ] Fix lint issues: npm run lint:fix
- [ ] Run unit tests: npm run test:watch
- [ ] Before committing: npm run lint:ci && npm run type-check && npm run test
- [ ] Run E2E tests: npm run test:e2e

Fixing Issues

Quick fixes:

npm run format          # Fix formatting
npm run lint:fix        # Fix linting
npm run type-check      # Check types
npm run test            # Run unit tests
npm run test:e2e        # Run E2E tests

Full quality check:

npm run lint && npm run type-check && npm run test

See TROUBLESHOOTING.md for common issues and solutions.

CI/CD Integration

GitHub Actions workflow (.github/workflows/quality.yml):

name: Quality Checks
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci
      - run: npm run format:check
      - run: npm run lint:ci
      - run: npm run type-check
      - run: npm run test:coverage
      - run: npx playwright install --with-deps
      - run: npm run test:e2e
        env: { CI: true }

Quality Standards

ALWAYS enforce:

• No any types (use unknown with type guards)
• Strict TypeScript configuration
• Test coverage > 70%
• Pre-commit validation
• E2E testing for critical flows

NEVER:

• Skip quality gates before committing
• Commit with TypeScript/lint errors
• Use any type without justification
• Run Prettier on TS/JS files (use Biome instead)

Reference Files

For detailed configuration, see:

• BIOME.md - Advanced Biome configuration, import organization, rules
• ESLINT.md - ESLint setup, React rules, customization
• TYPESCRIPT.md - TypeScript strict mode, advanced options
• PRE-COMMIT.md - Husky setup, lint-staged, commit hooks
• TESTING.md - Vitest and Playwright configuration
• TROUBLESHOOTING.md - Common issues and solutions

Common Patterns

Running Tests

npm run test              # Unit tests
npm run test:watch        # Watch mode
npm run test:coverage     # Coverage report
npm run test:e2e          # E2E tests
npx playwright show-report # View test report

Quality Gate Sequence

# During development
npm run format && npm run lint:fix

# Before commit
npm run lint:ci && npm run type-check && npm run test

# Full check (includes E2E)
npm run lint && npm run type-check && npm run test && npm run test:e2e

Remember: Code quality is not optional. Automated quality gates ensure consistency and catch errors early.