🖖 Inicio

SERVICIOS

Salir

nochedía

Cómo configurar Prettier y ESLint en VSCode

900 palabras
3 minutos
July 11, 2019
blogvscode

Te enseño cómo configurar prettier y eslint en tu editor favorito para programar en JavaScript

  1. Prólogo
  2. Qué es Prettier
  3. Qué es Eslint
  4. Cual es mejor?
  5. Como instalarlos
  6. Como configurarlos

Prólogo

La época donde formateábamos nuestro código siguiendo nuestros impulsos, recomendaciones o incluso libros donde se nos enseñaba la mejor manera de escribir para que otros (o nosotros mismos en un futuro) nos entendiesen mejor y más rápido, afortunadamente, ya es (casi) historia

En un mundo dinámico donde cada vez más se prima el minimalismo y la ley del mínimo esfuerzo (a menos esfuerzo por línea de código salen más líneas de código por unidad de tiempo), al final el tooling ha llegado para universalizar tendencias y permitirnos delegar esto del formato a terceros

No es tan definitivo porque hay (aún) una batalla entre si seguir códigos de estilo determinados (opinionated) o no, hay argumentos a favor de los dos aunque al final se reduce a la larga batalla entre pragmatismo y creatividad

Pero de cualquier manera, lo que sí tiene un valor incalculable es la consistencia en nosotros mismos, es decir, escojamos el estilo que escojamos, lo suyo es escribir siempre igual

Y para eso tenemos herramientas que nos ayudan muchísimo como prettier y eslint

Qué es Prettier

Proyecto con 32K estrellas en Github es, como ellos mismos dicen, un formateador dogmático u opinado en el sentido de que nos induce a formatear según sus propias reglas

No es absolutamente inflexible, nosotros podemos configurar muchas de esas normas, pero si no lo hacemos estaremos utilizando las que nos marca prettier por defecto, y eso a la comunidad le gusta porque simplifica y acelera el desarrollo

En nuestro caso, prettier con visual code nos servirá para dar formato a todos nuestros archivos sin tener que pensar, con el atajo (en Windows) de Ctrl + Alt + F cada vez que queramos ajustar el código

Podemos configurarlo para que ajuste el código automáticamente cada vez que grabamos en lugar de hacerlo manualmente, pero perdemos el valor didáctico de aprender de prettier cada vez que lo activamos nosotros

Qué es Eslint

Eslint con 14K estrellas en Github se encarga de encontrar errores siguiendo una combinación de normas que incluyen el propio lenguaje (es decir, nos avisa si hay algo que no funcionará) así como también ciertas normas de estilo opinadas

Cual es mejor?

La pregunta en realidad no ha lugar: Prettier no es un code linter (tienes el porqué se utiliza la palabra lint en la wikipedia) y por lo tanto, la pregunta relevante es:

Para qué sirve prettier si ya uso eslint?

La respuesta, porque prettier es más dogmático, lo que quiere decir que ya nos ofrece unas normas satisfactorias sin tener que hacer nada, y además porque lo que hace lo hace francamente bien

Se trata por lo tanto de configurar eslint para que sólo nos haga de linter y dejar que prettier haga de mentor espiritual

Como instalarlos

Lo más rápido es incluir en nuestro package.json los paquetes de eslint y prettier y hacerlo bajo devDependencies, ya que son paquetes que utilizaremos para controlar nuestro código pero no los necesitaremos para que nuestro código se ejecute (sino lo pondríamos en dependencies)

json
"devDependencies": {
"eslint": "*",
"prettier": "*",
"babel-eslint": "*",
"eslint-config-prettier": "*",
"eslint-plugin-react": "*"
},

Es más rápido copiar-pegar los paquetes en el package.json y luego instalarlos con un $1 o un $1 que ir uno por uno haciendo npm install --save-dev nombre_del_paquete o el equivalente yarn add --dev nombre_del_paquete

La explicación de los paquetes que no son los propiamente dichos eslint y prettier,

  1. babel-eslint incluye código que babel soporta
  2. eslint-config-prettier Este paquete invalidará todas las normas de eslint que entren en conflicto con prettier
  3. eslint-plugin-react para añadir normas propias de react

Como configurarlos

Si quieres configurar prettier (que no haría falta, yo como tengo mis preferencias sí lo hago) es tan sencillo como crear el archivo .prettierrc en tu carpeta base

Mi contenido es el siguiente

json
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120
}

Que quiere decir:

  1. semi no utilizar punto-y-coma al final de las líneas, no hace falta y no aporta mucho, para mi mejor fuera
  2. singleQuote prefiero utilizar comillas simples, manías que tengo
  3. trailingComma te lo explico en un segundo
  4. printWidth por defecto es 80, para mi es poco ancho para empezar a romper líneas, me siento más cómodo con 120

Qué es el trailing comma?

El siguiente código era ilegal anntes de ES5:

js
const objeto = {
site: 'kuworking.com',
secure: 'https',
}

y en su lugar tenías que poner

js
const objeto = {
site: 'kuworking.com',
secure: 'https',
}

Es decir, que con la coma final o la trailing comma ese código daba error

Pero a partir del ES5, esa coma es legal y salva muchos gatitos al final del día ya que si añadimos una línea nueva ya no tenemos que pensar en la coma

Es más importante de lo que parece 😅

Fijaros que en el propio .prettierrc el trailing comma no puede estar, es un archivo json y allí está prohibido, pero en JavaScript ES5 ya está permitido 😎

Tienes todas las opciones a configurar de prettier aquí

Y para configurar eslint lo mismo, crear el archivo .eslintrc.json que en mi caso es el siguiente

json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["prettier"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"strict": 0,
"indent": ["error", 2],
"semi": ["error", "never"]
}
}

Y explicando lo que quiere decir:

  1. env.browser env.es6 y env.node para establecer esos tres entornos, que son con los que yo trabajo, y sirve para que eslint sepa qué variables globales puede esperarse encontrar
  2. extends para decirle que va a tener que entenderse con prettier
  3. parser eslint utiliza espree, nosotros queremos que use babel para que incluya todo lo que babel incluye
  4. parserOptions.ecmaFeatures.jsx le decimos que sí, que utilizaremos sintaxis jsx (relevante con React y Gatsby)
  5. parserOptions.ecmaVersion defino que será la ES7, esto es la de 2016, una versión con cambios mayúsculos y absolutamente fantásticos
  6. parserOptions.sourceType le ponemos module cuando tenemos módulos para importar, como es el caso
  7. plugins react que es el pan de cada día
  8. rules.strict a false, es el equivalente a no poner el use strict en los archivos, y no nos hace falta con los módulos ES6 porque ya viene por defecto
  9. rules.indent los espacios de intendación
  10. rules.semi como en prettier, decirle que no marque como error la falta de semicoma al final de la línea

Tienes todas las opciones a configurar aquí

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]