ESLint, Prettier y Husky sin Angular

Introducción

En este artículo explicamos de forma clara y práctica qué son ESLint Prettier y Husky y cómo integrarlos en un proyecto Angular. También incluimos pasos de instalación comandos útiles y recomendaciones para mantener la calidad del código. Además presentamos a Q2BSTUDIO empresa de desarrollo de software a medida especialista en inteligencia artificial ciberseguridad servicios cloud AWS y Azure servicios de inteligencia de negocio y soluciones IA para empresas.

1 ESLint Definición

ESLint es un linter o analizador estático de código que recorre los archivos en busca de problemas de sintaxis y estilo. Funciona a partir de reglas configurables que pueden activarse o desactivarse según las necesidades del proyecto.

1 ESLint Función

Garantizar la calidad del código mantener consistencia prevenir bugs facilitar la mantenibilidad e integrarse en el flujo de trabajo de desarrollo. ESLint ayuda a imponer buenas prácticas y detectar patrones peligrosos antes de que lleguen a producción.

2 Prettier Definición

Prettier es un formateador de código opinativo cuyo objetivo es unificar la apariencia del código automáticamente. No sustituye a ESLint en reglas de calidad sino que evita discusiones de estilo dentro del equipo al aplicar un formato consistente.

2 Prettier Función

Formateo consistente del código. Prettier decide automáticamente aspectos como tamaño de indentación uso de punto y coma elección de comillas simple o doble colocación de paréntesis en funciones largas espacios en blanco y comas finales. Ahorra tiempo y se integra fácilmente con el flujo de trabajo del equipo.

3 Husky Definición

Husky facilita la configuración de git hooks que son scripts que se ejecutan en eventos del ciclo de vida de git como pre commit y pre push. Con Husky se puede automatizar validaciones antes de permitir commits o pushes.

3 Husky Función

Ejecutar ESLint y Prettier antes de commits para garantizar calidad ejecutar pruebas automáticas bloquear pushes cuando los tests fallan aplicar reglas sobre mensajes de commit y ejecutar comprobaciones de seguridad o procesos de build. Husky ayuda a que el equipo mantenga un estándar uniforme sin depender de la disciplina manual.

Pasos para instalar las herramientas en Angular

1 Añadir y configurar ESLint Ejecutar ng add @angular-eslint/schematics en el proyecto Angular esto generará la configuración inicial eslint.config.js en el directorio raíz y adaptará las reglas para TypeScript y templates Angular.

2 Añadir y configurar Prettier Instalar Prettier con npm install --save-dev prettier e instalar pretty-quick con npm install --save-dev pretty-quick para formatear solo los archivos staged. Instalar también eslint-config-prettier y eslint-plugin-prettier con npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Recomendación para configuración de Prettier Ajustes habituales printWidth 100 tabWidth 2 useTabs false singleQuote true trailingComma all semi true bracketSpacing true arrowParens always endOfLine auto htmlWhitespaceSensitivity ignore embeddedLanguageFormatting auto Crear además un archivo .prettierignore incluyendo node_modules dist package.json package-lock.json para excluir archivos y carpetas que no deben formatearse

3 Integración ESLint y Prettier en Angular Crear una configuración que extienda reglas recomendadas de ESLint de TypeScript y Angular y añada eslint config de Prettier para evitar conflictos. Habilitar el plugin prettier para que los errores de formato se informen por ESLint y ajustar reglas específicas de Angular como selectores de componentes y directivas y la regla no explicit any en TypeScript para reforzar tipado.

Ejemplo de reglas esenciales Asegurar reglas para selectors con prefijo app estilo kebab case para componentes camelCase para directivas regla prettier/prettier con endOfLine auto y regla @typescript-eslint/no-explicit-any en error para evitar any en el código

4 Scripts útiles en package.json Añadir scripts para agilizar tareas de lint y formateo lint ng lint pretty-quick pretty-quick --staged lint fix ng lint --fix format prettier --write . format staged pretty-quick --staged Ejecutar npm run lint para revisar problemas y npm run format para aplicar formateo cuando Prettier detecte inconsistencias

5 Instalar y configurar Husky Inicializar Husky con npx husky-init && npm install esto crea la carpeta .husky y el hook pre-commit por defecto Editar .husky/pre-commit para ejecutar npm run format staged y npm run lint de modo que antes de cada commit el código staged se formatee y se valide con ESLint

Añadir pre push para ejecutar tests Crear el hook pre push con npx husky add .husky/pre-push npm run test para garantizar que los tests unitarios se ejecutan en cada push y evitar que código roto llegue al repositorio remoto

Consejos prácticos para equipos Integrar estas herramientas en el pipeline CI usar pretty-quick en hooks para ejecutar solo sobre archivos staged combinar lint staged con Husky para optimizar tiempos y documentar la configuración para nuevos integrantes del equipo. Automatizar precommit y prepush mejora la calidad sin fricción.

Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software a medida que crea aplicaciones a medida y soluciones empresariales integrando inteligencia artificial ciberseguridad y servicios cloud AWS y Azure. Somos especialistas en inteligencia de negocio y Power BI para transformar datos en decisiones además de desarrollar agentes IA personalizados y soluciones de IA para empresas que aceleran procesos y generan ventajas competitivas. Nuestros servicios incluyen desarrollo de software a medida consultoría en ciberseguridad despliegue en servicios cloud y proyectos de inteligencia artificial e integración de soluciones de analítica avanzada.

Palabras clave aplicadas aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud AWS Azure servicios inteligencia de negocio ia para empresas agentes IA power BI

Beneficios de adoptar ESLint Prettier y Husky Mantener código consistente reducir errores en las revisiones acelerar el onboarding mejorar la calidad global del producto y asegurar que las mejores prácticas se respetan automáticamente. Estas prácticas combinadas ayudan a las empresas a entregar software a medida más confiable y seguro.

Contacto Q2BSTUDIO Si quieres implementar estas herramientas en tu proyecto Angular o desarrollar aplicaciones a medida con IA ciberseguridad y despliegue en la nube contacta con Q2BSTUDIO para una consultoría personalizada y soluciones escalables adaptadas a tu negocio.

Despedida Gracias por leer espero que esta guía te ayude a configurar ESLint Prettier y Husky en tus proyectos Angular Att Gustavo Machado Pontes