¿Cuántas veces te has sumado a un nuevo proyecto y enfrentado a la tediosa tarea de ajustar cada detalle, desde las convenciones de commits hasta las reglas de estilo del código?
Si alguna vez te has sentido abrumado por este proceso, ¡no estás solo!
En este blog, vamos a configurar de manera sencilla, paso a paso, estas cuatro herramientas, haciéndolo accesible incluso para aquellos que se sienten intimidados por la configuración del proyecto.
El proyecto de ejemplo lo vamos hacer con Next.js y TypeScript.
Conceptos
Husky: El Guardián de los Hooks
Configura ganchos (hooks) como el pre-commit o pre-push para asegurarse de que nuestro código cumple con ciertos estándares antes de ser subido.
CommitLint: El Maestro de la Armonía de los Commits
CommitLint establece reglas para que todos estemos en la misma página, comunicando de manera efectiva y manteniendo un historial de cambios comprensible.
Lint-Staged: Verificador de Archivos Modificados
Solo se ejecuta en archivos que han sido modificados en una confirmación específica, en lugar de ejecutarse en todo el proyecto como lo haría el linter normalmente.
ESLint: Supervisor Riguroso de Código
ESLint asegura que tu código sea legible y siga las mejores prácticas, desde la sangría hasta la declaración de variables.
Configuración Paso a Paso
1. Inicializar Proyecto Next.js
npx create-next-app@latestSelecciones recomendadas durante el setup:
- TypeScript: Yes
- ESLint: Yes
- App Router: Yes
2. Configurar ESLint
npx eslint --initSelecciones recomendadas:
- To check syntax and find problems
- JavaScript modules
- React framework
- TypeScript: Yes
- Browser environment
- JSON configuration format
3. Instalar Husky y Lint-Staged
npm i -D husky lint-staged
npx husky initModificar .husky/pre-commit para que ejecute lint-staged antes de cada commit.
Crear .lintstagedrc:
{
"**//*.{ts,tsx}": ["eslint"]
}4. Configurar CommitLint
npm i -D @commitlint/cli @commitlint/config-conventionalCrear .husky/commit-msg:
npx --no -- commitlint --edit $1Crear commitlint.config.js:
module.exports = {
extends: ["@commitlint/config-conventional"],
};Flujo en Acción
Con esta configuración en lugar, cualquier error de sintaxis (como una variable sin usar) se detecta automáticamente durante el pre-commit, impidiendo que se suba código defectuoso.
Al corregir el error y usar la estructura de Conventional Commits, el commit se aprueba correctamente.
Conclusión
¡Agradezco que hayas llegado hasta el final de esta guía! Espero sinceramente que te haya sido de gran utilidad.
Si querés ver más contenido como este, seguime en Medium.
¡Hasta la próxima! 🚀