Guía Completa de Linters - ESLint, Commitlint y Stylelint

Introducción a los Linters

• Los linters son herramientas de análisis estático de código que ayudan a mejorar la calidad del código, asegurando que siga ciertas reglas de estilo y convenciones. Estas herramientas son fundamentales en el desarrollo de software para mantener la coherencia del código, prevenir errores y mejorar la legibilidad.

ESLint: Análisis de Código JavaScript

Instalación de ESLint

Para instalar ESLint, ejecuta el siguiente comando:

npm install eslint --save-dev

Configuración de ESLint

Inicializa una configuración básica con:

npx eslint --init

• Sigue las instrucciones del asistente para configurar ESLint. Al finalizar, se creará un archivo .eslintrc.json con la configuración inicial.

Uso de eslint

Para ejecutar ESLint y revisar tu código:

npx eslint tuArchivo.js

Para arreglar automáticamente los errores que sea posible:

npx eslint --fix tuArchivo.js

Automatizar la corrección de eslint

• Para automatizar la corrección de ESLint, agrega el siguiente script en el archivo package.json:

"scripts": {
  "lint": "eslint . --fix"
}

• Ahora, puedes ejecutar ESLint con el comando:

npm run lint

Commitlint: Linting para Mensajes de Commit

Instalación de Commitlint

• Primero, instala Commitlint y sus adaptadores:

npm install @commitlint/{config-conventional,cli} --save-dev

Configuración de Commitlint

• Crea un archivo de configuración llamado commitlint.config.js en la raíz de tu proyecto con el siguiente contenido:

module.exports = { extends: ["@commitlint/config-conventional"] };

Integración con Git Hooks

1. Para integrar Commitlint con Git Hooks, instala el siguiente paquete:

npm install husky --save-dev

2. Activa los hooks de Git con Husky:

npx husky install

3. Añade el hook para commit-msg:

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

Stylelint: Linting para Estilos CSS

Instalación de Stylelint

Para instalar Stylelint, ejecuta:

npm install stylelint stylelint-config-standard --save-dev

Configuración de Stylelint

Crear un archivo de configuración llamado .stylelintrc.json en la raíz de tu proyecto con el siguiente contenido:

{
  "extends": "stylelint-config-standard"
}

Uso de Stylelint

Para ejecutar Stylelint y revisar tu código:

npx stylelint tuArchivo.css

Para arreglar automáticamente los errores que sea posible:

npx stylelint "ruta/a/tus/archivos/*.css" --fix

Conclusión

• Los linters como ESLint, Commitlint y Stylelint son herramientas esenciales en el desarrollo de software moderno. Ayudan a mantener la calidad del código, aseguran la consistencia en el estilo y pueden prevenir errores antes de que ocurran. Integrar estas herramientas en tu flujo de trabajo de desarrollo mejorará significativamente la calidad y mantenibilidad de tu código.