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:
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.