📱 🍏 🤖 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