hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

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 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]