Escribir c贸digo JavaScript hermoso y consistente usando ESLint, Prettier y VSCode

Traer consistencia a trav茅s de su c贸digo JS y equipos

Un estilo de c贸digo y un formato adecuados son imprescindibles para cada proyecto, y m谩s a煤n cuando hay varios desarrolladores trabajando en la misma base de c贸digo. Con tantas adiciones a JavaScript siguiendo los est谩ndares de ECMA y diferentes maneras de realizar una misma tarea, es necesario que haya est谩ndares unificados en su proyecto sobre qu茅 elegir. Usted encontrar谩 recomendaciones en todo el Internet sobre qu茅 preferir, pero a煤n as铆 no hay una regla estricta sobre qu茅 usar. Por ejemplo, puede elegir crear variables usando var en lugar de la palabra clave newlet de JavaScript para variables basadas en scope. As铆 que depende de ti establecer reglas para tu proyecto para que cada desarrollador en el equipo las siga y haya consistencia en todo tu c贸digo. Aqu铆 es donde la pelusa de c贸digo entra en juego.

驴Qu茅 son los linters?

Un linter es un programa que analiza el c贸digo fuente en busca de posibles errores program谩ticos y de estilo. Diferentes idiomas tienen diferentes estilos. ESLint es el linter para JavaScript. Dado que JavaScript es un lenguaje interpretado, es muy 煤til que se se帽alen los errores program谩ticos antes de ejecutar la aplicaci贸n. Aqu铆 hay un error program谩tico que ESLint detectar谩 y le informar谩:

let myFunction = () => {};
myFuction(); // Un error tipogr谩fico que causa error en tiempo de ejecuci贸n

Para errores de estilo, ESLint le permite establecer reglas espec铆ficas para su proyecto. Si usted se desv铆a de estas reglas al escribir c贸digo, ESLint se las reportar谩 a usted. Para ver la lista completa de reglas que ESLint soporta, siga este enlace:

Lista de reglas disponibles

Configurar ESLint es s煤per f谩cil.

Primero tenemos que instalar ESLint como una dependencia de desarrollo:

npm instalar eslint –save-dev

Luego inicializamos ESLint para nuestro proyecto:
./node_modules/.bin/eslint –init

Luego se le har谩n algunas preguntas sobre sus preferencias para configurar ESLint y al final se generar谩.eslintrc.

Si no est谩 seguro sobre las preguntas, puede omitir este paso. En su lugar, cree .eslintrc manualmente.

En este punto, usted tiene una configuraci贸n de ESLint que funciona para su proyecto. La configuraci贸n predeterminada de ESLint utiliza las reglas de eslint:recommended config. Sin embargo, hay una alternativa mejor en mi opini贸n: eslint-config-airbnb.

Airbnb ha creado un conjunto predefinido de reglas ESLint basadas en la Gu铆a de Estilo JavaScript de Airbnb. Este es un recurso extremadamente 煤til para todos los desarrolladores de JavaScript e intenta establecer una base com煤n para las buenas pr谩cticas de JS. Ellos han razonado cada decisi贸n que han tomado y le dan la oportunidad de entender lo mismo. Para empezar instale los siguientes paquetes npm como dependencia de dev:

 

/// Para proyectos de reacci贸n
babel-eslita
eslint-config-airbnb
eslint-plugin-importaci贸n
eslint-plugin-jsx-a11y
eslint-plugin-react

 

///F Para proyectos sin reacci贸n
babel-eslita
eslint-config-airbnb-base
eslint-plugin-import

A continuaci贸n, debe editar su archivo.eslintrc para extenderlo desde Airbnb config. As铆 es como se ver铆a tu configuraci贸n:

Tenga en cuenta tambi茅n que puede escribir reglas personalizadas que sustituyan a las reglas de configuraci贸n de Airbnb especific谩ndolas en el bloque de reglas.

Ahora ESLint est谩 configurado para tu proyecto y puedes borrar tus archivos ejecutando este comando:./node_modules/.bin/eslint[fileName] que le dar谩 una salida similar a 茅sta:

隆Genial! Ahora puede tener un c贸digo consistente en su proyecto que se adhiera a las reglas que ha establecido. Pero tambi茅n hablamos de un c贸digo correctamente formateado, 驴d贸nde est谩 eso?

Entrar, M谩s bonito

Prettier es un formateador de c贸digo opinionado que tiene reglas predefinidas para formatear y sangrar el c贸digo. Para usar m谩s bonito en su proyecto ejecute el siguiente comando:

npm install –save-dev prettytier

Esto le dar谩 acceso a Prettier CLI y podr谩 comprobar y realizar el autoformateo a trav茅s de un solo comando:

./node_modules/.bin/prettier –write[fileName]

Este comando se ejecutar谩 m谩s bonito en el archivo y reformatear谩 el c贸digo. Conveniente, 驴no es as铆? S贸lo aseg煤rese de que todos sus cambios anteriores se guardan, ya que este comando escribe directamente en el archivo.

Otra cosa buena de ser m谩s bonito es que puede ser configurado para ser usado con ESLint, donde usa reglas eslint para el formateo de c贸digo y podemos ver errores de formateo m谩s bonitos en un archivo cuando ejecutamos eslint en ese archivo.

Usando Prettier con ESLint

Primero necesita instalar los siguientes paquetes npm como dependencia de dispositivo:

eslint-config-prettier
eslint-plugin-prettier

A continuaci贸n tenemos que configurar ESLint para que use m谩s bonito, por lo que hacemos los cambios necesarios en .eslintrc En este caso, s贸lo tenemos que a帽adir “plugin:prettier/recomendado” al bloque de extensiones. Combinando con nuestra configuraci贸n anterior, el bloque de extensiones final se ver谩 de la siguiente manera:

"extiende": ["airbnb", ""plugin:m谩s bonito/recomendado""]

Ahora, obtendr谩 errores m谩s bonitos incluidos en los errores de ESLint. La configuraci贸n anterior es independiente del editor y no requiere el uso de extensiones.

Hemos llegado muy lejos para hacer que nuestro c贸digo sea consistente y hermoso. Sin embargo, si se da cuenta, no hay eficiencia en este proceso. Tenemos que ejecutar ESLint y m谩s bonito en cada archivo a trav茅s de la terminal. Para errores de ESLint necesitamos arreglar los errores y ejecutar ESLint de nuevo para verificar. Bueno, por eso tenemos editores de texto y VSCode es uno de los mejores.

VSCode para eficiencia

VSCode tiene extensiones para ESLint y Prettier que automatizan todo el proceso sin necesidad de un CLI. En primer lugar, instale estas dos extensiones:

  • ESLint – Visual Studio Marketplace
  • M谩s bonito – Formateador de c贸digo – Visual Studio Marketplace

Cuando reinicie VSCode y haya completado la configuraci贸n anterior para ESLint y Prettier, podr谩 ver la magia que ocurre. Los errores de ESLint son ahora directamente visibles en el editor sin necesidad de ejecutar el comando a trav茅s del terminal.

Puede pasar el rat贸n por encima de las l铆neas rojas para ver cu谩l es el error. A煤n mejor, puede ver el panel Problemas en VSCode para obtener detalles de todos los errores presentes en un archivo.

La m谩s bonita tambi茅n funciona fuera de la caja. Simplemente presione cmd + may煤sculas + P para abrir la caja de comandos del C贸digo VS y haga clic en Formatear Documento y obtendr谩 un c贸digo bonito. Otra adici贸n 煤til es el formato autom谩tico al guardar. Haga clic en cmd + , para abrir la configuraci贸n del VSCode y a帽adir esta l铆nea a la configuraci贸n del espacio de trabajo: “editor.formatOnSave”:true

Ahora, cada vez que guarde su archivo, 茅ste ser谩 embellecido autom谩ticamente.