Next.js
ESLint, formatting y calidad
Explica cómo combinar ESLint, formatting, TypeScript, tests y build para detectar hooks incorrectos, imports peligrosos y regresiones antes de producción.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
Next.js
Explica cómo combinar ESLint, formatting, TypeScript, tests y build para detectar hooks incorrectos, imports peligrosos y regresiones antes de producción.
Lint, formatting, type checking, tests y build protegen invariantes diferentes. Una pipeline de calidad no busca “cero warnings” como métrica decorativa: intenta impedir bugs, boundaries inválidas, código inaccesible, imports peligrosos y cambios no reproducibles antes de llegar a producción.
formatter → representación consistente
linter → patrones y errores estáticos
TypeScript→ relaciones de tipos
unit/tests→ comportamiento
next build→ rutas, bundles y prerender
E2E → sistema desplegadoPasar una capa no garantiza las demás.
En Next.js moderno ejecuta ESLint directamente:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"typecheck": "tsc --noEmit",
"build": "next build"
}
}next lint pertenece a versiones anteriores y next build ya no debe asumirse como ejecutor automático del linter. Sigue la guía de tu versión.
// eslint.config.mjs
import { defineConfig } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
export default defineConfig([
...nextVitals,
...nextTs,
{
ignores: [".next/**", "coverage/**", "playwright-report/**"],
},
]);Extiende de forma mínima. Cada plugin añade coste y posibles conflictos.
No conviertas preferencias subjetivas en cientos de errores que ocultan señales importantes.
Prettier o Biome resuelven espacios, comas y wrapping. El formatter no debe competir con ESLint por estilo. Usa integración oficial o desactiva reglas incompatibles.
Formatea en editor y verifica en CI:
"format:check": "prettier --check ."No mezcles una refactorización con miles de cambios de formato sin necesidad.
Una dependencia omitida puede crear stale closure. No desactives exhaustive-deps automáticamente:
// eslint-disable-next-line react-hooks/exhaustive-depsPrimero revisa si:
Si suprimes, explica la invariancia concreta.
Reglas/import conventions pueden impedir:
Client Component
→ imports db client
→ secret enters client graphComplementa con server-only, módulos por sufijo y public APIs de features. ESLint no entiende automáticamente toda autorización.
Buena suppression:
// The provider SDK declares this payload as any; runtime schema validates below.
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const raw = await provider.getPayload();Debe ser local, justificada y seguida por una protección. Evita desactivar una regla para todo el repo por un caso.
En CI, decide si warnings fallan:
eslint . --max-warnings=0Funciona cuando el equipo mantiene la deuda en cero. Si migras un repo grande, crea baseline y reduce gradualmente; no ocultes warnings nuevos entre miles antiguos.
Pipeline:
install with lockfile
→ format check
→ lint
→ typecheck
→ unit/integration
→ next build
→ E2E productionEjecuta tareas en paralelo cuando sean independientes, pero conserva logs claros.
Pre-commit puede revisar archivos modificados para feedback rápido. CI valida el repositorio completo y es la autoridad. No confíes solo en hooks locales: pueden omitirse.
Ignora .next, coverage y codegen externo. Para código generado propio, valida la fuente/schema y genera en CI. No formatees artefactos gigantes si se regeneran.
Autoordenar imports puede cambiar el orden de CSS y producir diferencias en build. No uses una regla ciega si CSS depende del grafo. Centraliza estilos globales y verifica producción.
Registra:
any/casts en boundaries.No optimices una pipeline lenta eliminando controles críticos; usa caché e incrementalidad.
Formato uniforme no detecta hooks incorrectos.
Puede no ejecutarlo.
Pierdes reglas específicas sin resolver causa.
Oculta errores futuros.
Generan ruido.
CI puede recibir código no validado.
Cambia cascade.
max-warnings=0?Estructura y arquitectura del proyecto convierte estas reglas en límites mantenibles.