---

⚛️ React + TypeScript + Vite

A lightweight and flexible starter template using Vite, React, and TypeScript with:

• Fast HMR via Babel or SWC
• Scalable ESLint configuration for type safety
• Production-ready lint rules for React and DOM

---

Plugins

This template supports both official plugins for Fast Refresh:

• @vitejs/plugin-react (uses Babel)
• @vitejs/plugin-react-swc (uses SWC)

---

🔍 Advanced ESLint Setup

For production-grade projects, extend the default ESLint configuration to enable type-aware linting:

export default tseslint.config({
  extends: [
    ...tseslint.configs.recommendedTypeChecked,
    // or stricter config:
    // ...tseslint.configs.strictTypeChecked,
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also add React-specific rules:

import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})



⸻

🚀 Getting Started

npm create vite@latest my-app --template react-ts
cd my-app
npm install
npm run dev



⸻

📂 Project Structure

├── public/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── ...
├── .eslintrc.js
├── tsconfig.json
└── vite.config.ts



⸻

🧪 Run Tests (if applicable)

npm test



⸻

📄 License

Distributed under the MIT License.

⸻

Maintainer

Made with love by @your-username. Contributions welcome!

---

### Notes:
- Replace all `your-username`, `your-repo-name`, and `your-package-name` with your actual GitHub and npm info.
- You can host the `ci.yml` under `.github/workflows/ci.yml` for GitHub Actions badge to work.