馃摫 馃崗 馃 Native girl's blog!

馃摑 Prettier y Eslint juntos, pero no revueltos


Prettier y ESLint se pelean entre ellos porque los dos se preocupan por formatear tu c贸digo, pero con la configuraci贸n adecuada puedes tener lo mejor de cada uno en todos tus proyectos.

馃摂 RESUMEN

1锔忊儯 PRETTIER

1. npm install prettier -D
2. Crear .prettierrc.json en ./
3. Actualizar _settings.json_ con
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
      }
4. Instalar extensi贸n Prettier

2锔忊儯 ESLINT

1. npm install eslint -D
2. npx eslint --init
3. Instalar exptensi贸n ESLint

3锔忊儯 EVITAR CONFLICTOS

1. npm install eslint-config-prettier -D
2. Actualizar .eslintrc.js con "Prettier" en 煤tlimo lugar

  extends: [
            "plugin:react/recommended",
            "standard",
            "prettier"
            ],

馃摝 Prettier

Prettier formatea tu c贸digo. La idea original de Prettier es no tener configuraci贸n. Pretende evitar debates de sobre el formateo de c贸digo. Aqu铆 podeis ver lo que dicen en su p谩gina oficial.

Prettier has a few options but we dont want more of them

馃敤 Instalaci贸n

npm install prettier -D

馃幆 Comandos

npx prettier . --check
# Nos muestra por consola los errores de formateo

npx prettier . --write
# Nos arregla los errores de formateo

馃憣 Estos comandos hacen un checkeo general de todo tu proyecto. Podemos ignorar carpetas creando un archivo .prettierignore

Hay que mirar que en settings.json est谩 esbenp.prettier-vscode como formateador por defecto.

   "editor.defaultFormatter":
    "esbenp.prettier-vscode"

馃摝 Eslint

Encuentra problemas en tu c贸digo. No s贸lo de formateo, si no tambi茅n errores como dejar una variable sin usar y cosas as铆. Autom谩ticamente puede solucionarte estos problemas. Evidentemente no lo soluciona todo, pero es una muy buena aproximaci贸n.

馃敤 Instalaci贸n

npm install eslint -D
# Instala el apquete EsLint

npx eslint --init
# Inicializar ESLint

Nos va a hacer una serie de preguntas para configurar ESLint. Si usamos TypeScript, que tipo de errores queremos que contemple鈥 馃憣 Puedes ver una configuraci贸n explicada por Midudev aqui.

Nos pedir谩 instalar algunas dependencias necesarias y ahora tendremos un archivo .eslintrc.js en la ra铆z desde nuestro proyecto parecido a este:

.eslintrc.js

馃幆 Comandos

npx eslint .
# Nos muestras los errores que encuentra
npx eslint --fix
# Arregla todos los errores que puede solucionar

馃憣 Formatear al guardar. Esto no lo hace por defecto. Pero podemos configuarlo en el archivo settings.json.

    "editor.formatOnSave": true

馃檶 Evitar conflictos entre ESLint y Prettier

npm install eslint-config-prettier -D
// eslintrc.js
  extends: [
            "plugin:react/recommended",
            "standard",
            "prettier"
            ],

Estas configuraci贸n desactivar todas la reglas de ESLint que entren en conflicto con las de Prettier. 脡ste ser谩 ahora el encargado de formatear tu c贸digo.

馃専 EXTRA: Pasar ESLint & Pritter antes de commitear

npx mrm lint-staged

mrm es un paquete para cambiar de forma r谩pida los archivos de configuraci贸n de un proyecto, como el package.json, por ejemplo.

A este mrm se le pasa el preset de lint-staged que actualiza nuestro package.json con los scripts necesarios para que pase el ESLint y el Prettier antes de ejecutar un commit y nos impida commitear si encuentra alg煤n error.

馃憣 S贸lo lo pasa a los archivos que hemos modificado.

Esto es lo que se a帽ade a nuestro package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }

馃摎 Sources

Compartir en Twitter