Overview

Adds a minimal, conventional code-quality baseline for Vite with React and TypeScript. It wires in a type-check step, a lean ESLint setup, and a compact Prettier configuration with simple scripts to keep quality enforceable without bloat.

How This Skill Works

Implements a type-check pass via pnpm exec tsc --noEmit, establishes a lean ESLint config tailored for React + TS, and optionally a small Prettier config. It updates package.json with scripts for check, lint, and format, and tweaks tsconfig/eslint/prettier as needed to stay lightweight.

When to Use It

• Bootstrapping a new Vite React-TS project with a quality baseline
• Adding type-checking, linting, and formatting to an existing Vite React-TS codebase
• Configuring CI to fail on TypeScript errors or lint issues
• Maintaining a lean toolchain without heavy plugins
• Ensuring consistent code quality across small to mid-size teams

Quick Start

1. Step 1: Add a type-check script to package.json (pnpm exec tsc --noEmit) and a check script
2. Step 2: Create a minimal ESLint config for React + TypeScript and add a lint script
3. Step 3: If desired, add a tiny Prettier config and a format script; run checks with the new commands

Best Practices

• Always include a concrete type-check command (pnpm exec tsc --noEmit) and expose it in CI
• Keep ESLint rules minimal and aligned with React + TypeScript
• Use a small Prettier config if you enable formatting
• Document and reuse package.json scripts for lint/check/format
• Test tooling compatibility with your Vite + TS build and React version

Example Use Cases

• package.json: scripts { check: 'pnpm exec tsc --noEmit', lint: 'eslint . --ext .ts,.tsx', format: 'prettier --write .' }
• .eslintrc.cjs: minimal React + TS config
• tsconfig.json: noEmit: true and skipLibCheck for faster checks
• .prettierrc.json: small formatter rules
• README snippet showing how to run: npm run check && npm run lint

Frequently Asked Questions