‫-: Antes de pasar a
‫la siguiente sección y mongoDB, quiero mostrarle cómo configurar
‫eslint junto con un código más bonito en vs
‫para mejorar la calidad de nuestro código.
‫Ahora bien, si no está
‫usando el código vs, o si ya tiene
‫algún tipo de linter en su flujo de trabajo, marque esta lección
‫como completada y pase a la siguiente sección.
‫Pero si es nuevo en
‫es Lint y desea mejorar la calidad
‫de su código, comencemos con este video.
‫Entonces, es Lint es básicamente un programa que
‫escanea constantemente nuestro código y encuentra
‫posibles errores de codificación
‫o simplemente malas prácticas de codificación que cree que son incorrectas.
‫Es muy, muy configurable para que
‫realmente podamos ajustarlo a nuestras necesidades
‫y hábitos de codificación.
‫Ahora también podemos usar es Lint para formatear el
‫código, pero continuaremos usando
‫más bonito que ya configuramos anteriormente para eso.
‫Así que configuraremos todo esto
‫para que más bonito siga siendo el formateador de código principal,
‫pero basado en algunas reglas de es
‫Lint que definiremos.
‫Entonces, todo lo que es Lint hará por
‫nosotros es resaltar los errores.
‫Pero sé que todo esto
‫probablemente suene más confuso que cualquier otra cosa.
‫Así que vamos a configurar esto ahora.
‫Entonces, lo primero que quiero
‫que hagas es instalar la extensión es Lint para vs Code.
‫Así que ven aquí y busca es Lint.
‫¿Okey?
‫Y ya lo tengo
‫instalado, pero se ve así.
‫Entonces, todo lo que necesita hacer
‫es continuar e instalarlo, y luego probablemente volver a cargar esta ventana.
‫Y si aún no ha
‫configurado Prettier, hágalo también.
‫Entonces, con esta extensión
‫aquí, pero esta ya la
‫hicimos en la primera sección si la seguiste conmigo.
‫A continuación, necesitamos instalar un montón de dependencias de desarrollo,
‫así que hagamos esto aquí mucho más grande
‫y vayamos a nuestra otra terminal aquí.
‫Y entonces digamos, npm install y también necesitamos instalar es
‫Lint en paquetes más bonitos como npm.
‫¿Okey?
‫Entonces es Lint y más
‫bonito, y probablemente esta sea
‫la primera vez
‫que instalemos varios paquetes al mismo tiempo.
‫Y eso es muy fácil, simplemente escribimos todos
‫estos paquetes en el mismo comando.
‫¿Okey?
‫Pero con estos dos, en realidad, estamos lejos de estar listos.
‫Así que el siguiente es es Lint config más
‫bonito y este deshabilitará el formateo para
‫es Lint, porque recuerde, queremos más bonito para formatear nuestro código.
‫A continuación, tenemos el complemento es Lint más
‫bonito y este permitirá que
‫es Lint muestre errores de formato a medida
‫que escribimos, nuevamente, usando más bonito.
‫¿Okey?
‫Y todo esto, por supuesto, es
‫muy confuso y necesité mucho tiempo para resolverlo.
‫Y esto realmente es solo una receta
‫que debes seguir aquí.
‫¿Okey?
‫Entonces no se trata de
‫entender lo que estoy haciendo aquí,
‫todo lo que necesita hacer es seguir
‫esta receta, y luego funcionará para este proyecto, y en
‫proyectos futuros todo lo que tiene que
‫hacer es ir a su archivo de paquete dot json y
‫copie esa configuración e instálela en su próximo proyecto.
‫Porque en realidad, todos
‫estos paquetes deben instalarse localmente.
‫No funcionaría si intentáramos hacer
‫esto a nivel mundial.
‫¿Bien?
‫De todos modos, necesitamos ahora una buena guía de estilo de trabajos
‫que podamos seguir.
‫Y hay muchas guías de estilo,
‫pero la más
‫popular es probablemente la guía de estilo de airbnb.
‫Entonces, en realidad, hay una configuración
‫de es Lint que podemos usar para
‫eso, que está en npm, y se llama eslint config airbnb.
‫De acuerdo, a continuación, tenemos el nodo del complemento eslint, y esto
‫agregará un par de reglas específicas de eslint solo
‫para nodejs, ¿de acuerdo?
‫Básicamente, para encontrar algunos
‫errores que podríamos estar cometiendo al escribir código nodejs.
‫Y ahora, finalmente, necesitamos otros tres complementos de eslint que
‫solo son necesarios para que la guía de
‫estilo de Airbnb realmente funcione.
‫Así que esa guía de estilo depende de ellos.
‫Entonces, eslint plugin, import, eslint,
‫plugin,
‫jsx,
‫a11y,
‫y
‫veo que
‫tengo un error aquí.
‫Y finalmente eslint,
‫plugin, reacciona.
‫Aunque no estamos escribiendo en el código de reacción
‫aquí, todavía necesitamos este porque la
‫guía de estilo de airbnb depende de él.
‫Estos son todos los paquetes,
‫espero haberlos escrito correctamente.
‫Y ahora tenemos que guardarlos como dependencias
‫de desarrollo, así que guarde dev
‫y presione regresar, y cruce los dedos para que todo funcione aquí.
‫Entonces, parece que lo hizo.
‫Echemos un vistazo a nuestro
‫paquete dot json y, de hecho, aquí tenemos todos estos paquetes.
‫Excelente.
‫Ahora, el siguiente paso es que
‫necesitamos archivos de configuración tanto para más bonito como para es lint, ¿verdad?
‫Y ya creamos el más bonito antes y
‫ya está en nuestro proyecto aquí.
‫También lo es este, y todo
‫lo que hice aquí fue decir que siempre quiero la comilla simple.
‫¿Okey?
‫Y el otro es el archivo de configuración para es
‫lint, y nuevamente ya está en los archivos
‫de inicio porque realmente no necesitamos perder
‫el tiempo simplemente para escribir
‫este terrible archivo de configuración, ¿verdad?
‫Entonces, el archivo ya
‫está escrito, vayamos muy rápido a través de él.
‫Entonces, aquí dijimos
‫que queremos usar la guía
‫de estilo de airbnb, y
‫también más bonita, y también el complemento de nodo, ¿de acuerdo?
‫Ahora, esl int se trata de reglas de
‫codificación y hay muchas reglas que
‫es lint intenta imponernos.
‫Pero en realidad podemos
‫cambiar los que queramos usar, uno por uno.
‫Y podemos apagarlos por completo o
‫simplemente mostrar una advertencia en lugar de mostrar un error.
‫Por ejemplo, una regla es que eslint no quiere
‫que usemos los registros de puntos de la consola en nuestro código,
‫por lo que cada vez, de forma predeterminada, nos dará un
‫error cuando usemos el registro de
‫puntos de la consola.
‫Pero en lugar de
‫mostrarme un error, lo configuro para que solo me muestre
‫una advertencia, por eso hemos advertido.
‫También podría apagarlo
‫por completo cancelando, como hice
‫con muchas de estas otras reglas.
‫Entonces, por ejemplo, aquí en el siguiente que dice
‫que todas y cada una de
‫las funciones siempre deben devolver algo, ¿de acuerdo?
‫Y a veces, simplemente tenemos una función que no
‫lo hace, por lo que necesitaba desactivar esta regla por completo.
‫O finalmente, también tenemos, por
‫ejemplo, esta regla aquí, que dice que
‫nunca debería haber una variable que declaramos pero no usamos.
‫Esto en realidad detecta muchos errores, por
‫lo que lo dejo como un error aquí,
‫pero también creé algunas excepciones.
‫Entonces, estas cuatro excepciones aquí, que son las
‫variables típicas que tenemos
‫en express, por
‫lo que en nuestros manejadores en express, pero que no siempre usamos.
‫¿Derecha?
‫Entonces, no quiero que se marquen como errores cada
‫vez que tengo, por ejemplo,
‫una variable req en una función, pero no la uso.
‫¿Okey?
‫Así que puedes echar un vistazo a estas otras
‫reglas aquí y decidir
‫cuál te gusta y cuál no.
‫Entonces, estas son las reglas que tienen sentido para mí,
‫pero, por supuesto, pueden ser diferentes para ti.
‫Vayamos rápidamente al sitio web de eslint
‫para ver todas las cosas
‫que puede configurar.
‫Entonces aquí tienes algo de documentación y algunas instrucciones sobre cómo
‫configurarlo, pero todo lo que realmente quiero
‫mostrarte son
‫todas estas reglas diferentes.
‫Así que los
‫tiene todos aquí y, para ver, hay un montón,
‫un montón de ellos que puede configurar, ¿de acuerdo?
‫Así que eche un vistazo a
‫esto, pero en realidad es más fácil simplemente configurar este es lint cada vez
‫que obtiene un nuevo error en su código.
‫¿Okey?
‫Déjame mostrarte eso, para
‫que ahora podamos verlo en la práctica.
‫Así que vayamos al archivo de nuestro servidor aquí, y simplemente
‫creemos un código aquí que vaya
‫en contra de algunas reglas de es.
‫Entonces, por ejemplo, definir una variable aquí, como esta, y
‫luego asignarle algo más.
‫De acuerdo, entonces sabemos que x es una constante y,
‫por lo tanto, no debería reasignarse.
‫Entonces, si damos esto
‫ahora asignado, deberíamos ver un error.
‫Y bueno, no lo hicimos, así que voy a cerrar
‫la ventana y luego a abrirla de nuevo.
‫Así que haz eso
‫también y, con suerte, estará funcionando para entonces.
‫Bien, y en realidad vemos nuestros errores aquí
‫ahora marcados en rojo.
‫Entonces, ahora llegamos a esta pestaña de problemas.
‫Permítanme moverlo un poco hacia
‫arriba, y aquí vemos todos los errores que tenemos.
‫Entonces, comenzando con el
‫primero, se esperaba una línea vacía después de
‫la declaración requerida no seguida de otra requerida.
‫Básicamente, lo que me
‫está diciendo es que quiere estos requisitos aquí
‫en la parte superior y luego, una línea vacía y luego así.
‫Y así, el error desaparece.
‫¿Okey?
‫Y así, este tipo de refuerza un estándar de codificación más agradable.
‫A continuación, se asigna x y nunca se usa un valor.
‫Y así es que no
‫hay variables no utilizadas que mencioné antes.
‫Entonces, este de aquí.
‫¿Okey?
‫Entonces, esto es un error, pero también podría apagarlo solo
‫para mostrarles cómo cambiaría eso.
‫Así que lo guardé, y ahora ese error desapareció.
‫Entonces ves que ya no está marcado en rojo.
‫Pero en realidad quiero que esto sea
‫un error, así que escribo error, lo guardo y nuestro error está de vuelta.
‫Verá, se declara pero nunca se usa.
‫Y luego, aquí x es constante.
‫Entonces realmente cometimos un error
‫aquí, que fue reasignar
‫una constante, y eso no está permitido, así que
‫eliminemos esto y luego el error desaparece.
‫Todavía tenemos este porque el valor nunca
‫se ha utilizado.
‫Escribamos rápidamente x más dos y ahora desapareció.
‫Pero tenemos el siguiente error, básicamente
‫simplemente porque tenemos
‫este código aquí sin asignar a nada.
‫Entonces, digamos que const y es igual a este, pero
‫luego, por supuesto, y se asigna pero nunca se usa, por lo que
‫estamos ingresando a este ciclo aquí.
‫Pero, de todos modos, esto fue solo para demostrártelo.
‫Y entonces veamos ahora la advertencia final.
‫Y esa es la consola no, ¿verdad?
‫Así que recuerda que hablé de este antes y
‫es verde porque es una advertencia.
‫Entonces, nuevamente, podría apagarlo, y luego mi problema
‫desaparecería, por lo que el código se vería
‫normal ahora.
‫Pero en realidad quiero que eslint me advierta sobre eso,
‫porque no es una buena práctica
‫tener demasiados registros de consola más adelante en producción.
‫Está bien, ahora está de vuelta.
‫Y de hecho vs code también me advierte que
‫hay una advertencia verde aquí en
‫este archivo.
‫Tal vez lo hayas notado antes,
‫pero si ponemos un
‫error aquí, en realidad se volverá rojo.
‫¿Okey?
‫Así que ahora es rojo y tenemos dos problemas ahí.
‫Y eso es realmente útil para identificar
‫problemas en todos estos archivos.
‫Muy bien, eliminémoslo.
‫Y en realidad, eso es todo.
‫Así que espero que también te
‫haya funcionado si tienes algún error, intenta
‫simplemente instalar los mismos paquetes que yo.
‫Así que todo esto aquí, y recuerde que así
‫es como lo hace.
‫Entonces, por ejemplo, si desea
‫eslint cinco, simplemente diga npm I eslint a las cinco.
‫Por ejemplo, incluso puede ir a cinco puntos 16 puntos 0
‫solo para asegurarse de que todo sea igual.
‫Y en ese caso, todo debería funcionar como
‫lo hizo aquí para mí.
‫Genial, este fue otro paso importante
‫en su viaje para convertirse en desarrollador.
‫Porque, créanme, es muy importante
‫tener código en su lugar como lo tiene ahora.
‫Entonces, nuevamente, para su próximo proyecto,
‫simplemente continúe, copie estas dependencias en su archivo json
‫de packet dot y luego instálelas todas
‫al mismo tiempo.
‫Y eso le hará la vida mucho más fácil.
‫Así es como siempre lo
‫hago, y lo mismo, por supuesto, con el rc
‫más bonito y este archivo de configuración eslint.
‫De todos modos, basta de hablar para este video.
‫Ahora finalmente estamos listos para pasar a
‫la sección muy importante de mongodb.