Cómo usar Husky con Prettier en un proyecto de React

Cómo usar Husky con Prettier en un proyecto de React

En el desarrollo web moderno mantener la calidad y la consistencia del código es fundamental. Herramientas como Prettier se encargan del formateo automático, mientras que Husky garantiza que ciertas comprobaciones se ejecuten antes de hacer commit o push al repositorio. Combinar Husky con Prettier en un proyecto de React evita problemas de formato, acelera las revisiones de código y reduce errores triviales en el historial de commits.

Pasos rápidos para integrar Husky y Prettier en un proyecto de React

1. Instalar dependencias de desarrollo
Ejemplo de instalación con npm
npm install --save-dev prettier husky lint-staged pretty-quick

2. Inicializar Husky
Usa el instalador automático que crea el hook prepare en package.json
npx husky-init && npm install

3. Añadir un hook precommit que ejecute lint-staged
npx husky add .husky/pre-commit npx lint-staged

4. Configurar lint-staged para formatear solo los archivos staged
En package.json añade la configuración lint-staged que ejecute prettier --write sobre los archivos de código y opcionalmente eslint --fix. De este modo solo los cambios preparados se formatean antes del commit, manteniendo el flujo de trabajo ágil.

Consejos prácticos y buenas prácticas

• Definir reglas de Prettier
Crea un archivo .prettierrc con tus preferencias de estilo y compártelo en el repositorio para que todo el equipo use la misma configuración.

• Complementar con eslint
Integra eslint para reglas de calidad adicionales y añade eslint --fix en lint-staged junto a prettier --write para corregir problemas automatizados.

• Hooks adicionales
Además de pre-commit puedes añadir pre-push para ejecutar tests o comprobaciones más exhaustivas antes de permitir un push al remoto.

• Integración con CI
Aunque Husky protege el flujo local, siempre conviene repetir formateo y checks en la pipeline CI para evitar que commits desde entornos sin hooks rompan el estilo.

Por qué esto es importante para tu equipo

Automatizar el formateo y las comprobaciones reduce el tiempo de revisión, evita discusiones de estilo en los pull requests y mejora la mantenibilidad del código. Para empresas que desarrollan aplicaciones a medida y software a medida es clave mantener estándares desde el primer commit, especialmente cuando trabajas con equipos distribuidos o integras servicios complejos como arquitecturas cloud.

Q2BSTUDIO y cómo podemos ayudarte

En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones que combinan calidad de código y despliegues seguros. Ofrecemos servicios que incluyen inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y automatización de procesos. Si necesitas desarrollar un proyecto a medida con buenas prácticas de DevOps y control de calidad desde el primer día, descubre nuestros servicios de desarrollo de aplicaciones a medida en desarrollo de aplicaciones y software multicanal y explora nuestras soluciones de inteligencia artificial para empresas en inteligencia artificial y agentes IA.

Palabras clave relevantes

aplicaciones a medida, software a medida, inteligencia artificial, ia para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, power bi, automatización de procesos

Conclusión

Integrar Husky con Prettier en un proyecto de React es una medida sencilla que aporta grandes beneficios en calidad y productividad. En Q2BSTUDIO implementamos estas prácticas como parte de nuestros procesos para entregar soluciones robustas y alineadas con las mejores prácticas de la industria.