deseo crear un monorepo con turborepo para mi app de next usando shadcn ui. Deseo ademas agregar eslint y prettier con todas las configuraciones recomentadas y algunos plugins para verificar las clases de tailwind css y hacer import order asi como plugins de prettier que se apliquen de forma general a mi app
Para crear tu monorepo con todas estas configuraciones, sigue estos pasos:
- Primero, crea un nuevo directorio y ejecuta estos comandos:
mkdir my-monorepo
cd my-monorepo
pnpm init- Crea la estructura de directorios:
mkdir -p apps/web packages/ui- Inicializa el proyecto Next.js en apps/web 2:
cd apps/web
pnpm dlx create-next-app@latest . --typescript --tailwind --eslint --app --src-dircd apps/web
pnpm dlx shadcn@canary initCuando se te pregunte, selecciona "Next.js (Monorepo)" como tipo de proyecto.
- Copia todos los archivos de configuración que te proporcioné anteriormente en sus respectivas ubicaciones:
.eslintrc.jsy.prettierrc.jsen la raízpackage.jsonyturbo.jsonen la raízcomponents.jsonenapps/webypackages/ui- Los archivos de Tailwind y utilidades en sus respectivas carpetas
- Instala las dependencias del proyecto:
pnpm installLa estructura final de tu monorepo será:
.
├── apps/
│ └── web/ # Tu aplicación Next.js
│ ├── src/
│ └── components.json
├── packages/
│ └── ui/ # Componentes compartidos
│ ├── src/
│ │ ├── components/
│ │ ├── styles/
│ │ └── lib/
│ └── components.json
├── .eslintrc.js
├── .prettierrc.js
├── package.json
└── turbo.jsonEsta configuración incluye:
- Monorepo con Turborepo para gestionar los workspaces 1
- shadcn/ui configurado para el monorepo 3
ESLint con:
- TypeScript
- Tailwind CSS
- Import ordering
- Recomendaciones estándar
Prettier con:
- Plugin de Tailwind CSS para ordenar clases
- Configuración consistente en todo el proyecto
- Estructura de componentes compartidos en el paquete
ui
Para usar los componentes de shadcn/ui, puedes agregarlos desde el directorio de tu aplicación 3:
cd apps/web
pnpm dlx shadcn@canary add buttonLos componentes se instalarán en el paquete ui y podrás importarlos en tu aplicación web como:
import { Button } from "@workspace/ui/components/button"
He creado un nuevo paquete @workspace/eslint-config que contiene toda la configuración de ESLint y Prettier. Aquí está cómo funciona:
Estructura del paquete:
library.js: Configuración base para bibliotecas TypeScriptreact.js: Configuración específica para Reactnext.js: Configuración específica para Next.jsprettier-preset.js: Configuración compartida de Prettier
Configuraciones disponibles:
- Para proyectos Next.js:
@workspace/eslint-config/next - Para proyectos React:
@workspace/eslint-config/react - Para bibliotecas:
@workspace/eslint-config/library
- Para proyectos Next.js:
- Para usar en un nuevo proyecto:
# Instalar el paquete
pnpm add -D @workspace/eslint-configLuego, crea un .eslintrc.js:
module.exports = {
root: true,
extends: ["@workspace/eslint-config/next"], // o react o library según el proyecto
};Y un .prettierrc.js:
module.exports = {
...require("@workspace/eslint-config/prettier-preset"),
};Características incluidas:
- Ordenamiento de imports
- Reglas de accesibilidad
- Reglas de React y React Hooks
- Ordenamiento de clases Tailwind
- Reglas de TypeScript
- Configuración de Prettier optimizada
- Scripts útiles para agregar en package.json:
{
"scripts": {
"lint": "eslint . --ext .ts,.tsx,.js,.jsx",
"format": "prettier --write \"**/*.{ts,tsx,md,json}\""
}
}Esta configuración modular te permite:
- Mantener una configuración consistente en todos tus proyectos
- Actualizar las reglas en un solo lugar
- Extender o sobrescribir reglas según sea necesario en proyectos específicos
- Reutilizar la configuración en otros monorepos o proyectos
Para actualizar las reglas o agregar nuevos plugins, solo necesitas modificar los archivos en el paquete @workspace/eslint-config y todos los proyectos que lo utilicen recibirán las actualizaciones al reinstalar las dependencias.