Husky y Lint-Staged: Cómo configurar y automatizar pre-commit hooks para test, lint y formateo
En el desarrollo de proyectos JavaScript, mantener la consistencia del código y garantizar altos estándares de calidad puede resultar un reto, especialmente en equipos con múltiples colaboradores. La integración de herramientas de automatización en el flujo de trabajo permite ejecutar de forma automática tareas esenciales como el formateo, el análisis de código (lint) y la ejecución de test antes de que se realicen commits o push. Este artículo explora en detalle cómo configurar Husky y Lint-Staged para reforzar la calidad del código en tus proyectos JavaScript. ¿Qué es Husky y Lint-Staged? Husky es una solución nativa para gestionar Git hooks, es decir, scripts que se ejecutan automáticamente en determinados eventos de Git (como antes de un commit o un push). Gracias a Husky, es posible asegurarse de que se cumplan una serie de comprobaciones y tareas esenciales antes de que los cambios se integren al repositorio. Por otro lado, Lint-Staged es una herramienta que permite ejecutar comandos únicamente sobre los archivos que han sido modificados y se encuentran en estado “staged”. Esto resulta en un proceso mucho más eficiente, ya que se aplican los formateos y las validaciones únicamente en el conjunto reducido de archivos afectados, en lugar de analizar toda la base de código. ¿Por qué usar Husky y Lint-Staged? Utilizar Husky y Lint-Staged aporta múltiples beneficios en el desarrollo de aplicaciones JavaScript: Aseguramiento de la calidad: Garantizan que el código cumpla con las normas de estilo y calidad mediante la ejecución automática de linters, formateadores y pruebas unitarias. Prevención de errores: Al interceptar el proceso de commit o push, se detectan y corrigen errores antes de que estos se integren a la base de código, evitando problemas en producción. Optimización del flujo de trabajo: Lint-Staged analiza únicamente los archivos modificados, lo que reduce considerablemente el tiempo de ejecución de las tareas de validación. Uniformidad en el equipo: Permiten que todos los colaboradores sigan los mismos estándares, asegurando la coherencia y mantenibilidad del código. Configurando Husky y Lint-Staged A continuación, se detalla el proceso de configuración de Husky y Lint-Staged en un entorno JavaScript, integrando herramientas fundamentales como Prettier, ESLint y Vitest. Configurando el entorno Imaginemos que estamos trabajando en un proyecto JavaScript en el que es imprescindible mantener un código limpio y sin errores. Para ello, configuraremos los siguientes scripts en el archivo package.json: Prettier como formateador: Se encargará de aplicar un formato consistente en todo el código. npm run format ESLint como linter: Detecta errores y aplica buenas prácticas de codificación. npm run lint Vitest como framework de pruebas: Valida que el código funcione según lo esperado mediante pruebas unitarias. npm run test Estos comandos se integrarán en nuestros Git hooks para que, antes de cada commit, se asegure que el código se formatea, se analiza y se prueba. Instalar Husky y configuración Ejecuta el siguiente comando para instalar Husky como dependencia de desarrollo: npm install --save-dev husky Inicializa Husky en tu repositorio (recuerda que debes haber inicializado previamente Git en el proyecto): npx husky init Este comando añade automáticamente un script de preparación en el package.json y crea una carpeta .husky en la raíz del proyecto que contendrá, entre otros, el hook pre-commit. Configuración del hook pre-commit: Edita el archivo .husky/pre-commit para incluir los comandos necesarios. Por ejemplo: npm run format npm run lint npm run test Con esta configuración, cada vez que realices un commit, Husky ejecutará estos comandos. Si alguno de ellos falla, se detendrá el proceso de commit, permitiéndote corregir los errores antes de proceder. Instalar Lint-Staged y configuración Añade Lint-Staged como dependencia de desarrollo: npm install --save-dev lint-staged Agrega el siguiente script en tu archivo package.json para facilitar la ejecución de Lint-Staged: "scripts": { "lint-staged": "lint-staged" } Crea un archivo llamado .lintstagedrc.json en la raíz del proyecto y define los comandos a ejecutar para los archivos modificados. Por ejemplo: { "*.{css,scss}": ["npx prettier . --write"], "*.{js,jsx,ts,tsx}": [ "npx prettier . --write", "eslint --fix", "vitest run --environment=jsdom" ] } Con esta configuración, Lint-Staged aplicará Prettier, ESLint y Vitest únicamente en los archivos JavaScript (y sus variantes) que hayan sido modificados y añadidos al área de staging. Para aprovechar Lint-Staged en el hook pre-commit, modifica el archivo .husky/pre-commit para que ejecute el script de Lint-Staged en lugar de correr los comandos de forma individual: npm run lint-staged De esta forma, el proceso de validación se optimiza al centrarse únicamente en
En el desarrollo de proyectos JavaScript, mantener la consistencia del código y garantizar altos estándares de calidad puede resultar un reto, especialmente en equipos con múltiples colaboradores.
La integración de herramientas de automatización en el flujo de trabajo permite ejecutar de forma automática tareas esenciales como el formateo, el análisis de código (lint) y la ejecución de test antes de que se realicen commits o push.
Este artículo explora en detalle cómo configurar Husky y Lint-Staged para reforzar la calidad del código en tus proyectos JavaScript.
¿Qué es Husky y Lint-Staged?
Husky es una solución nativa para gestionar Git hooks, es decir, scripts que se ejecutan automáticamente en determinados eventos de Git (como antes de un commit o un push). Gracias a Husky, es posible asegurarse de que se cumplan una serie de comprobaciones y tareas esenciales antes de que los cambios se integren al repositorio.
Por otro lado, Lint-Staged es una herramienta que permite ejecutar comandos únicamente sobre los archivos que han sido modificados y se encuentran en estado “staged”. Esto resulta en un proceso mucho más eficiente, ya que se aplican los formateos y las validaciones únicamente en el conjunto reducido de archivos afectados, en lugar de analizar toda la base de código.
¿Por qué usar Husky y Lint-Staged?
Utilizar Husky y Lint-Staged aporta múltiples beneficios en el desarrollo de aplicaciones JavaScript:
Aseguramiento de la calidad: Garantizan que el código cumpla con las normas de estilo y calidad mediante la ejecución automática de linters, formateadores y pruebas unitarias.
Prevención de errores: Al interceptar el proceso de commit o push, se detectan y corrigen errores antes de que estos se integren a la base de código, evitando problemas en producción.
Optimización del flujo de trabajo: Lint-Staged analiza únicamente los archivos modificados, lo que reduce considerablemente el tiempo de ejecución de las tareas de validación.
Uniformidad en el equipo: Permiten que todos los colaboradores sigan los mismos estándares, asegurando la coherencia y mantenibilidad del código.
Configurando Husky y Lint-Staged
A continuación, se detalla el proceso de configuración de Husky y Lint-Staged en un entorno JavaScript, integrando herramientas fundamentales como Prettier, ESLint y Vitest.
Configurando el entorno
Imaginemos que estamos trabajando en un proyecto JavaScript en el que es imprescindible mantener un código limpio y sin errores. Para ello, configuraremos los siguientes scripts en el archivo package.json:
Prettier como formateador:
Se encargará de aplicar un formato consistente en todo el código.
npm run format
ESLint como linter:
Detecta errores y aplica buenas prácticas de codificación.
npm run lint
Vitest como framework de pruebas:
Valida que el código funcione según lo esperado mediante pruebas unitarias.
npm run test
Estos comandos se integrarán en nuestros Git hooks para que, antes de cada commit, se asegure que el código se formatea, se analiza y se prueba.
Instalar Husky y configuración
Ejecuta el siguiente comando para instalar Husky como dependencia de desarrollo:
npm install --save-dev husky
Inicializa Husky en tu repositorio (recuerda que debes haber inicializado previamente Git en el proyecto):
npx husky init
Este comando añade automáticamente un script de preparación en el package.json y crea una carpeta .husky en la raíz del proyecto que contendrá, entre otros, el hook pre-commit.
Configuración del hook pre-commit:
Edita el archivo .husky/pre-commit para incluir los comandos necesarios. Por ejemplo:
npm run format
npm run lint
npm run test
Con esta configuración, cada vez que realices un commit, Husky ejecutará estos comandos. Si alguno de ellos falla, se detendrá el proceso de commit, permitiéndote corregir los errores antes de proceder.
Instalar Lint-Staged y configuración
Añade Lint-Staged como dependencia de desarrollo:
npm install --save-dev lint-staged
Agrega el siguiente script en tu archivo package.json para facilitar la ejecución de Lint-Staged:
"scripts": {
"lint-staged": "lint-staged"
}
Crea un archivo llamado .lintstagedrc.json en la raíz del proyecto y define los comandos a ejecutar para los archivos modificados. Por ejemplo:
{
"*.{css,scss}": ["npx prettier . --write"],
"*.{js,jsx,ts,tsx}": [
"npx prettier . --write",
"eslint --fix",
"vitest run --environment=jsdom"
]
}
Con esta configuración, Lint-Staged aplicará Prettier, ESLint y Vitest únicamente en los archivos JavaScript (y sus variantes) que hayan sido modificados y añadidos al área de staging.
Para aprovechar Lint-Staged en el hook pre-commit, modifica el archivo .husky/pre-commit para que ejecute el script de Lint-Staged en lugar de correr los comandos de forma individual:
npm run lint-staged
De esta forma, el proceso de validación se optimiza al centrarse únicamente en los cambios realizados, ahorrando tiempo y recursos.
Descubre el resto de los detalles y puntos clave en mi blog:
