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.
pre-commit: 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

Para frontEnd con ReactJS

# eslint-config-airbnb and all peerDependencies
npx install-peerdeps --dev eslint-config-airbnb@latest

Para frontEnd con ReactJS y TS

# install all other devDependencies for TS
npm install eslint-config-airbnb-typescript \
    @typescript-eslint/eslint-plugin@latest \
    @typescript-eslint/parser@latest \
    --save-dev

Para backend sin TS

# eslint-config-airbnb-base and all peerDependencies
npx install-peerdeps --dev eslint-config-airbnb-base@latest

Para backend con TS

# eslint-config-airbnb-base and all peerDependencies
npx install-peerdeps --dev eslint-config-airbnb-base@latest

# install all other devDependencies for TS
npm install eslint-config-airbnb-typescript \
    @typescript-eslint/eslint-plugin@latest \
    @typescript-eslint/parser@latest \
    --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 pre-commit

npm install --save-dev pre-commit

En nuestro package.json le decimos a pre-commit que ejecute el script npm run lint-stage y npm run test antes del commit

"pre-commit": [
    "lint-staged",
    // more scripts
],```

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

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