No limpie su código, corríjalo con Prettier

Linting nos facilita la vida porque nos dice qué está mal en nuestro código. Pero, ¿cómo podemos evitar hacer el trabajo real que implica arreglarlo?

Anteriormente escribí sobre el pelaje, qué es y cómo te facilita la vida. Al final, incluí una forma en la que podrías corregir automáticamente tu código. Entonces, ¿por qué estoy escribiendo esto?

¿A qué te refieres con arreglarlo?

Antes de entrar en él, hagámoslo rápido. Los linters son poderosos y proporcionan una manera fácil de escanear su código en busca de errores de sintaxis que podrían generar errores. O simplemente pueden ayudar a mantener una base de código limpia, saludable y consistente. Cuando se ejecute, mostrará todos los problemas y le permitirá revisar cada uno individualmente para solucionarlos.

Llevando eso al siguiente nivel, algunos linters le permitirán pasar un argumento al comando que ejecuta el linter que le permite arreglarlo automáticamente. Esto significa que no tiene que revisar manualmente y hacer todos esos pequeños espacios en blanco y punto y coma (¡¿agregarlos?) ¡Usted mismo!

Entonces, ¿qué más puedo hacer para arreglar las cosas?

Si ya utiliza la opción de reparación, es un buen comienzo. Pero existen herramientas que se han desarrollado específicamente para abordar este problema más allá de una simple bandera en su comando. El que voy a cubrir es más bonito.

¿Qué es más bonito?

Prettier se identifica a sí mismo como "un formateador de código obstinado". Toma una entrada de su código y lo genera en un formato consistente eliminando el estilo del código original. De hecho, convierte su código en un árbol de sintaxis, luego lo reescribe usando los estilos y reglas que usted y Prettier proporcionan juntos a través de su configuración de ESLint y las reglas predeterminadas de Prettier.

Puede usar Prettier fácilmente solo para formatear su código, lo que funciona bien. Pero si combina esto con un proceso ESLint subyacente, obtiene tanto un linter como un fijador poderoso. Les voy a mostrar cómo hacer que funcionen juntos.

Empezando con Prettier

Para este tutorial, asumiré que tiene ESLint configurado y configurado en una aplicación. Particularmente, voy a continuar donde lo dejé en mi tutorial anterior donde instalamos ESLint en una aplicación React.

Además, Prettier nos dice desde el principio que es un formateador de código obstinado. Debe esperar que formatee su código de una manera coherente, pero tal vez de una manera diferente a la que tiene actualmente configurado. ¡Pero no te preocupes! Puede modificar esta configuración.

Entonces, ¿con qué comenzamos? Nosotros ya:

  • Ha instalado ESLint
  • Hemos agregado Babel como nuestro analizador
  • Se agregó un complemento que incluye configuraciones de React.

A continuación, comencemos instalando algunos paquetes:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Nota: el comando anterior es similar a usar npm. Si su proyecto no se usa yarn, cambie a npmsegún corresponda.

Arriba, estamos instalando:

  • más bonito: núcleo Paquete y motor más bonito
  • prettier-lint: pasa el resultado Prettier a ESLint para que lo corrija usando su configuración de ESLint
  • prettier-eslint-cli: ayuda a Prettier y ESLint a trabajar juntos en varios archivos de su proyecto

Y los estamos instalando como una dependencia de desarrollo, ya que no lo necesitamos fuera del desarrollo.

Configurando su nuevo formateador

Ahora que nuestros paquetes están instalados, podemos configurar yarnpara ejecutar este comando por nosotros.

Previamente, configuramos un lintscript para que se vea así en nuestro package.json:

"scripts": { ... "lint": "eslint . --ext .js" ... }

Vamos a dejar eso como está, pero haremos algo similar y crearemos un nuevo script justo al lado llamado formatpara nuestro formateador Prettier:

"scripts": { ... "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'", "lint": "eslint . --ext .js" ... }

Entonces, ¿qué está pasando allí? Fueron:

  • Añadiendo un nuevo script llamado format, que podemos ejecutar comoyarn format
  • Estamos utilizando nuestro prettier-eslint-clipaquete para ejecutar el formateo por nosotros.
  • Estamos pasando nuestra configuración de ESLint ubicada junto a nuestra package.jsonen la raíz del proyecto (cambie esto si está en una ubicación diferente)
  • Y finalmente, le estamos diciendo a más bonita que escriba todos los archivos que coincidan **/*.js, o cualquier archivo JS que encuentre de forma recursiva a través de nuestro proyecto.

La belleza aquí es que estamos pasando nuestra configuración de ESLint a Prettier. Esto significa que solo tenemos que mantener 1 configuración para ambas herramientas, pero aún aprovechamos el poder de enlace de ESLint junto con el poder de formato de Prettier.

¡Ejecute su formateador!

Ahora que estamos listos, ¡ejecutémoslo! Ejecute lo siguiente:

yarn format 

e inmediatamente, vemos que funciona:

¡Oye, mi código se ve diferente!

Como mencioné anteriormente, Prettier nos dice directamente que es un formateador obstinado. Se envía con sus propias reglas, algo así como su propia configuración de ESLint, por lo que también realizará esos cambios.

¡No abandone su código! En su lugar, puede revisar los cambios, ver si tal vez tiene sentido mantenerlo así (será muy consistente) o puede actualizar su configuración de ESLint ( .eslintrc.js) para sobrescribir las reglas que no le gustan. Esta también es una buena manera de aprender algunas cosas nuevas que quizás no esperaba que descubrieran antes.

¿A dónde nos lleva esto?

Si lo ha seguido hasta ahora, ahora tenemos dos comandos:

  • lint: que verificará su código por usted y le dirá qué está mal
  • format: intentará solucionar los problemas automáticamente

Cuando los use en la práctica, lo mejor que puede hacer es ejecutar siempre formatprimero para dejar que intente arreglar automáticamente todo lo que pueda. Luego, corra inmediatamente lintpara detectar cualquier cosa que Prettier no haya podido arreglar automáticamente.

¿Que sigue?

Ahora que podemos formatear nuestro código automáticamente, ¡deberíamos poder corregir nuestro código automáticamente!

La próxima vez llevaremos esto un paso más allá y configuraremos un gitenlace que permitirá que esto se ejecute antes de confirmar. ¡Esto significa que nunca tendrá que preocuparse por olvidarse de ejecutar esto nuevamente!

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín

Publicado originalmente en //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/