hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Cómo configurar Prettier y ESLint en VSCode

1000 palabras
4 minutos
July 21, 2020
blogvscode

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

  1. Los formatters
  2. Los linters
  3. Qué es Prettier
  4. Qué es Eslint
  5. Necesitamos los dos?
  6. Instalación
  7. Configuración
  8. Y para vscode

Los formatters

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 ya es (casi) historia

  • El por qué de escribir con cierto orden viene de la necesidad de poder entendernos a nosotros mismos en un futuro

  • El por qué de escribir con ciertas normas comunes viene de la necesidad de que otros nos puedan entender

Hay lenguajes (como python) que tienen estructuras muy definidas que garantizan una lectura relativamente fácil

Pero hay otros lenguajes más caóticos, y JavaScript era uno de esos

Hoy ya no lo es, y no lo es gracias a un tooling específico que aunque opcional, y aunque con distintas opciones, garantizan un estilo coherente y universal

La aplicación más famosa es prettier, un formatter que nos formatea el código siguiendo unos estándares muy compartidos y muy específicos, y no es neutral, es opinionated

Otra aplicación igualmente famosa es eslint, un formatter neutral que también puede extenderse con otros formatters externos

Los linters

En paralelo a esto, tenemos los linters, programas que nos avisan de problemas en nuestro código al momento

  • No tenemos que esperar a compilar (si estamos compilando)

  • No tenemos que esperar a ver el error (y empezar el debug)

  • Podemos arreglarlo con una combinación de teclas

Estas tres líneas que acabo de escribir suponen toda una revolución en la programación y acceleran el desarrollo una bestialidad

Cuál es el linter más famoso? Eslint

Qué es Prettier

Proyecto con 37K estrellas en Github que es, como ellos mismos dicen, un formateador dogmático o opinionated 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 el archivo, ojo con esto ya que no veremos qué cambios ocurren y puede ser arriesgado

Qué es Eslint

Eslint con 16K 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 (esto es, con un formatter incluido)

Necesitamos los dos?

Absolutamente no, no necesitamos ninguno, todos son opcionales

El más importante? Eslint porque tener un linter es impagable

Hace falta un formatter?

Definitivamente sí, tener un formatter es un ejercicio de delegar una tarea que antes nos ocupaba un tiempo significativo, con lo que tendremos más tiempo para tareas más productivas

Y puedes quedarte con el formatter de eslint?

Y tanto, aunque si prettier es popular debe ser por algo ...

Eso sí, si quieres utilizar los dos hay que configurarlos para que se entiendan

Instalación

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

Y aparte de los paquetes evidentes, también incluimos el babel-eslint que nos sirve para incluir características más nuevas o experimentales que ESLint no soporta, eslint-plugin-react para añadir normas específicas para React, y eslint-config-prettier, que nos servirá para desactivar toda la parte de eslint que puede interferir con prettier

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

Siempre puedes hacer lo mismo con yarn

bash
yarn add --dev eslint prettier babel-eslint eslint-config-prettier eslint-plugin-react

Configuración

Lo primero es configurar que eslint y prettier se entiendan, y para eso creas 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 (para React)

  5. parserOptions.ecmaVersion defino que será la ES9, esto es la de 2018, cualquier versión por encima de la EC7 ya nos dará los cambios más significativos

  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 incluido por defecto

  9. rules.indent los espacios de intendación

  10. rules.semi decirle que no marque como error la falta de semicoma al final de la línea

Tienes todas las opciones a configurar aquí

Con esto eslint delega en prettier, y para configurar este último creas el archivo .prettierrc

Ya que prettier es opinionated en realidad no haría falta configurar nada, pero puedes no estar del todo de acuerdo con las decisiones que se toman

Por ejemplo, con la versión 2 Prettier decidió cambiar los valores por defecto del

  • trailingComma
  • arrowParens

El primer cambio me parece perfecto ya que en mi caso ya lo utilizaba anteriormente, esto es, que se añada una coma siempre que sea posible (cuando estemos en multi-line)

js
// sin trailing coma
// prettier-ignore
const objeto = {
site: 'kuworking.com',
secure: 'https'
}
// con trailing coma
const objeto = {
site: 'kuworking.com',
secure: 'https',
}

El segundo cambio no lo comparto, se trata de poner paréntesis siempre, lo que en mi opinión ofusca el código innecesariamente (se decide en aras de facilitar que una función pueda tener argumentos en el futuro)

js
// Sin paréntesis
const objeto = props => whatever()
// Con paréntesis
// prettier-ignore
const objeto = (props) => whatever()

Luego tenemos el valor de semicolons, que yo evito a toda costa y que en prettier sigue estando activo por defecto

js
// Sin punto y coma
const objeto = props => whatever()
// Con punto y coma
// prettier-ignore
const objeto = (props) => whatever();

Y luego tenemos el utilizar comillas dobles o simples, Prettier las prefiere dobles, yo las prefiero simples

Por lo tanto, en mi caso definitivamente sí quiero configurar prettier para modificar estos aspectos que he comentado, y lo hago con este .prettierrc

json
{
"semi": false,
"singleQuote": true,
"arrowParens": "avoid",
"printWidth": 120
}

El último elemento es el printWidth, que Prettier recomienda y con razón que se quede en 80

Esto ya depende de cada cual, pero los argumentos a favor de quedarse con los 80 son muy razonables

Aún y así yo prefiero tener líneas más anchas

Tienes todas las opciones a configurar de prettier aquí

Y para vscode

Una vez tenemos en nuestro proyecto ya instaladas y configuradas las librerías, nos falta terminar la configuración con las extensiones de vscode

Las esenciales, las de prettier y eslint (los enlaces son al marketplace de vscode)

Y a partir de aquí, extensiones que cubren formatos cada vez más habituales como el css-in-js, el mdx o el graphql

Y listos!

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 🙏

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]