🚀 Vite React Template

Una plantilla moderna y robusta para el desarrollo de aplicaciones web, construida con las mejores tecnologías y prácticas actuales.

✨ Características

• ⚡️ Vite 6
• ⚛️ React 19
• 🎨 TailwindCSS v4
• 📝 TypeScript
• 🎯 ESLint
• ✨ Prettier
• 🔧 Configuración Lista - Configuración preestablecida de TypeScript, ESLint y Prettier

📜 Scripts Disponibles

• dev - Inicia el servidor de desarrollo
• build - Construye la aplicación para producción
• preview - Previsualiza la construcción de producción localmente
• lint - Ejecuta ESLint para encontrar y corregir problemas en el código
• lint:check - Verifica el código con ESLint sin realizar correcciones
• format - Formatea el código usando Prettier
• format:check - Verifica el formato del código sin realizar cambios

📁 Estructura del Proyecto

vite-react-template/
├── src/               # Código fuente
├── public/            # Archivos estáticos
├── .vscode/          # Configuración de VS Code
├── .eslintrc.js      # Configuración de ESLint
├── .prettierrc       # Configuración de Prettier
├── tsconfig.json     # Configuración de TypeScript
└── vite.config.ts    # Configuración de Vite

⚙️ Configuración de Prettier

Esta plantilla incluye una configuración optimizada de Prettier para mantener un estilo de código consistente:

{
	"printWidth": 150,        // Longitud máxima de línea
	"semi": false,           // Sin punto y coma al final
	"singleQuote": true,     // Usa comillas simples
	"jsxSingleQuote": true,  // Comillas simples en JSX
	"tabWidth": 2,          // 2 espacios de indentación
	"trailingComma": "none", // Sin comas finales
	"useTabs": true,        // Usa tabs en lugar de espacios
	"bracketSameLine": true, // Cierre de etiquetas en la misma línea
	"endOfLine": "lf"       // Saltos de línea estilo Unix
}

🔧 Configuración de VS Code

La plantilla incluye configuraciones predefinidas para VS Code que mejoran la experiencia de desarrollo:

Configuraciones del Editor

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",  // Usa Prettier como formateador por defecto
  "editor.foldingImportsByDefault": true,              // Colapsa imports por defecto
  "editor.formatOnSave": true,                         // Formatea al guardar
  "editor.codeActionsOnSave": {
    "source.organizeImports": "always"                 // Organiza imports al guardar
  }
}

Extensiones Recomendadas

La plantilla recomienda las siguientes extensiones de VS Code:

• Prettier (esbenp.prettier-vscode): Formateador de código
• ESLint (dbaeumer.vscode-eslint): Linter de JavaScript/TypeScript
• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss): Autocompletado para Tailwind
• Import Cost (wix.vscode-import-cost): Muestra el tamaño de los paquetes importados

Estas extensiones se instalarán automáticamente cuando abras el proyecto en VS Code y aceptes las recomendaciones.

---

⭐️ Si te gusta este template, ¡no olvides darle una estrella!