Optimiza tu flujo de trabajo: Lint Staged + Husky + Prettier + ESLint

Índice de contenidos

• Introducción
• La importancia de implementar un flujo automatizado de trabajo
• Entendiendo las herramientas
  • Prettier
  • ESLint
  • Lint Staged
  • Husky
• Si ya conoces las herramientas salta directo a:
  Implementación del flujo de trabajo

Introducción

En este artículo exploraremos la importancia de implementar un flujo de desarrollo automatizado que nos alerte de posibles errores en nuestro código JavaScript, así como problemas de formato que no cumplan los estándares establecidos en nuestro proyecto. Todo esto se llevará a cabo antes de hacer un commit en Git, lo que nos permitirá abordar estos problemas de manera eficiente.

La importancia de implementar un flujo de trabajo

Contar con un flujo de trabajo automatizado es fundamental, especialmente cuando trabajamos en equipo. Las herramientas que describiremos a continuación nos permitirán detectar automáticamente problemas que no se ajusten a los estándares establecidos en el proyecto. Esto ayudará a evitar discrepancias en los estilos de desarrollo y mantendrá una consistencia en todo el código. Además, nos permitirá detectar posibles errores antes de hacer un commit en Git.

Implementar este flujo de trabajo también es crucial cuando somos los únicos desarrolladores en el proyecto. Nos ayudará a detectar posibles errores en JavaScript y a mantener un código limpio, al igual que un historial de git ordenado, ya que Lint Staged no permitirá hacer commits sin resolver los errores detectados.

Entendiendo las herramientas

Prettier

Si quieres obtener la definición más precisa de Prettier.io, te recomiendo consultar su documentación oficial.

En pocas palabras, Prettier es una herramienta que formatea el código para garantizar un estilo de desarrollo consistente. Lo hace de manera automatizada, siguiendo las reglas de formato definidas en el proyecto, lo cual nos ahorra tiempo en comparación con el formateo manual. Prettier es compatible con una amplia variedad de lenguajes de programación y nos permite establecer reglas para la indentación, saltos de línea, espacios en blanco, colocación de corchetes y muchos otros aspectos.

ESLint

Como destaca claramente la página de inicio de ESLint: «Encuentra y resuelve problemas en tu código JavaScript».

ESLint es una herramienta de «linting» y análisis estático de código diseñada para JavaScript y TypeScript. Nos permite detectar problemas en nuestro código antes de su ejecución, lo que contribuye a reducir errores en producción. A diferencia de Prettier, que se enfoca en el formateo del código, ESLint se concentra en encontrar errores de sintaxis y malas prácticas. Al igual que Prettier, ESLint es configurable por proyecto, lo que nos permite adaptarlo a nuestras necesidades específicas.

Tanto Prettier como ESLint se pueden integrar en diversos flujos de trabajo de desarrollo, al igual que en editores de texto (por ejemplo Visual Studio Code)

Integración en Flujos de Trabajo y Editores de Texto

Tanto Prettier como ESLint pueden integrarse fácilmente en diversos flujos de trabajo de desarrollo, así como en editores de texto populares, como Visual Studio Code. Esta integración nos brinda la ventaja de recibir retroalimentación en tiempo real y sugerencias para mejorar nuestro código mientras escribimos, lo que contribuye a mejorar la calidad del código y mantener la consistencia en nuestros proyectos.

Al comprender las capacidades y beneficios de Prettier y ESLint, podemos aprovechar al máximo estas herramientas para mejorar el formateo del código, detectar errores y elevar la calidad general de nuestro desarrollo

Husky

Husky nos permite incorporar hooks (o ganchos) de Git en nuestros proyectos. Los hooks de Git son scripts que se ejecutan automáticamente en momentos clave del ciclo de vida de Git, como antes de realizar un commit o antes de hacer un push.

Con Husky, podemos definir fácilmente los comandos a ejecutar en cada etapa de Git. En este artículo en particular, nos centraremos en el pre-commit, que nos permite analizar los archivos antes de realizar un commit en Git.

Lint Staged

Lint Staged es una herramienta ampliamente utilizada en proyectos que hacen uso de Git como sistema de control de versiones. Su función principal es la detección automática de archivos modificados en el proyecto, los cuales son sometidos a un proceso de «linting» utilizando ESLint antes de realizar el commit.

Al combinar Lint Staged con Husky, podemos analizar únicamente los archivos que han sido modificados antes de un commit, en lugar de analizar todos los archivos del proyecto.

Implementación del flujo de trabajo

Configurar Prettier

• Instala Prettier
  

npm install --save-dev --save-exact prettier

• Crea el archivo .prettierrc para configurar prettier:

echo {}> .prettierrc

Estas son algunas de las opciones, visita la documentación para ver todas las opciones.

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": true,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

• Crea el archivo .prettierignore para ignorar carpetas o archivos, por ejemplo directorios como build o node_modules
  

# Ignore directories
node_modules
dist

Configurar Eslint

• Instala eslint-config-prettier para evitar conflictos entre eslint y prettier.
  También instalaremos eslint-plugin-prettier para ejecutar prettier como una regla de eslint.

npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev

Si usas Typescript deberás instalar @typescript-eslint/eslint-plugin y @typescript-eslint/parser

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

• Crea el archivo .eslintignore para ignorar nuestro build y node_modules como mínimo, al igual que hemos hecho con .prettierignore.

• Crea el archivo .eslintrc para la configuración.
  Este es un ejemplo usando Typescript y Jasmine como nuestro test framework, visita esta documentación para más información sobre la configuración.

{
    "root": true,
    "plugins": [
      "@typescript-eslint",
      "prettier"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier"
    ],
    "rules": {
      "prettier/prettier": 2 ,
      "no-use-before-define": ["error", { "functions": true, "classes": true }],
      "no-var": "error",
      "prefer-const": "error"
    },
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
    },
    "env": {
      "node": true,
      "es6": true,
      "jasmine": true
    }
}

Añadir Scripts para ejecutar prettier y eslint

Por último vamos a añadir scripts al archivo package.json para ejecutar linting y prettier de una manera sencilla.

"scripts": {
    "prettier": "prettier --config .prettierrc './**/*.{js,ts}' --write",
    "lint": "eslint ./src --ext .js,.ts",
    "lint-fix": "eslint ./src --ext .js,.ts --fix",
    "start": "....",
    "watch": "....",
    "test": "....",
  }

Ahora puedes probar estas configuraciones en el terminal, con los siguientes comandos:
npm run lint para ver una lista de errores en el case de que existan.
npm run lint-fix para corregir dichos errores de manera automática.

Configurar Husky

Siguiendo las instrucciones en la documentación:

Instala husky

npm install husky –save-dev

Añade al archivo package.json el script «prepare»

npm set-script prepare «husky install»

El script en package.json quedaría de la siguiente manera:

"scripts": {
    "prettier": "prettier --config .prettierrc './**/*.{js,ts}' --write",
    "lint": "eslint ./src --ext .js,.ts",
    "lint-fix": "eslint ./src --ext .js,.ts --fix",
    "start": ".....",
    "watch": "......",
    "test": .....,
    "prepare": "husky install"
  }

Tras añadir el script, ejecútalo una primera vez:

npm run prepare

Ahora verás en el root de tu proyecto un directorio nuevo: . husky

.husky/_
  .gitignore
  husky.sh

Añadiremos el hook con lo que necesites ejecutar antes de hacer un commit, es decir pre-commit, en el terminal:

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

Verás que se ha creado un archivo pre-commit dentro del directorio .husky el cual invoca husky.sh y que no debes modificar, y ejecuta npm test que deberías tener definido en package.json, si no lo tienes definido cámbialo por cualquier otro comando para probar.

En este caso vamos a cambiar este comando para poder ejecutar eslint y prettier únicamente en los archivos que han sido modificados que es lo que nos interesa, y es donde entramos en el útimo paso, instalar y configurar lint-staged.

Configurar Lint Staged

Para instalar lint staged en la linea de comandos:

npm install –save-dev lint-staged

Creamos el archivo .lintstagedrc.json  en el root de nuestro proyecto para configurar qué comandos queremos ejecutar sobre los archivos modificados, y añadimos lo siguiente:

{
  "*.{js,ts}": [
    "prettier --config .prettierrc --write",
    "eslint ./src --ext .js,.ts"
  ]
}

Y por último vamos a reemplazar el npm test que habíamos añadido al hook pre-commit creado en husky, y añadimos lo siguiente:

npx lint-staged

¡Y eso es todo! ahora provoca algún error como añadir espacios donde no debes o usar doble quotes, intenta hacer un commit y verás la magia pasar.