eslint + airbnb + prettier

Integrando eslint, airbnb rules y prettier en nuestro flujo de trabajo.

Quien, que y por que.

• eslint: un linter para JavaScript.
• airbnb style: guía de estilo para JavaScript. ( usadas por el lint )
• prettier: Es un formateador de código, al que le diremos que use las reglas de eslint para aplicar formato al código de forma automática.
• husky: Nos permite definir acciones que serán ejecutadas antes de hacer un commit evaluando ciertas reglas que definamos, en este caso, forzaremos a ejecucción de prettier que formateará nuestro código aplicando las reglas de airbnb.
• lint-staged: Corre eslint a los archivos que estan en stage antes del commit.

REQUISITOS Tener npm 5

Instalaremos las tres herramientas:

Instalamos eslint y prettier

npm install -D eslint@latest prettier@latest

Instalamos las reglas de airbnb

# Si vas a usar react
npx install-peerdeps --dev eslint-config-airbnb@latest

# si no vas a usar react
npx install-peerdeps --dev eslint-config-airbnb-base@latest

# Si vas a usar Typescript en backend (nodejs)
npm install eslint-config-airbnb-typescript \
    @typescript-eslint/eslint-plugin@^5.13.0 \
    @typescript-eslint/parser@^5.0.0 \
    --save-dev

Instalamos la configuración para que prettier use las reglas de eslint para aplicar el formato a nuestro código.

npm install -D eslint-config-prettier@latest eslint-plugin-prettier@latest

Le decimos a eslint que reglas aplicar y con quien debe integrarse, creando .eslintrc en la raiz del proyecto. En este caso le pediremos q eslint que aplique las reglas de airbnb.

con React

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

Sin React

{
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],

  "rules": {
    "prettier/prettier": ["error"],
    "camelcase": "off"
  }
}

Backend nodeJS con Typescript

"extends": [
  "airbnb-typescript/base",
  "plugin:@typescript-eslint/recommended",
  "plugin:import/typescript",
  "prettier"
],
"plugins": [
  "@typescript-eslint",
  "import",
  "prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
  "project": "./tsconfig.json"
},

Para sobre-escribir reglas directamente en .eslintrc, por ejemplo para desabilitar el forzado de camelCase

{
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],

  "rules": {
    "prettier/prettier": ["error"],
    "camelcase": "off"
  }
}

También podemos sobre-escribir usando prettier definiendo reglas en el archivo .prettierrc en la raíz del proyecto.

{
  "singleQuote": true
}

Instalamos lint-staged

npm install --save-dev lint-staged@latest

Instalamos husky

npx husky-init && npm install

En nuestro package.json le decimos a husky que aplique el lint antes del commit a los archivos que están en staged

 "scripts": {
    ...
    "precommit": "lint-staged",
    ...
  }

En nuestro package.json le indicamos al lint-staged las reglas que debe aplicar y sobre que archivos hacerlo.

...
"lint-staged": {
    "src/**/*.{jsx,js,json,css,md}": [
      "prettier --write"
    ]
  }
  ...

Al instalar husky, se crea un archivo en .husky/pre-commit donde le indicamos a husky las instrucciones que debe ejecutar antes del commit. Le diremos que ejecute nuestro script pre-commit definido en nuestro package.json

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run pre-commit

Gracias a Fernando por las revisiones y aportes a este artículo.