‫-: Entonces, esta sección y el proyecto del formulario de
‫nodo ahora están básicamente
‫completados, pero en este video quería
‫repasar muy rápidamente la configuración de mi
‫código VS y también, junto con usted, configurar la extensión Prettier.
‫Y estas son las extensiones que he instalado en
‫mi código VS y no todas van a
‫ser relevantes
‫para este curso, pero siempre que
‫haya una extensión relevante la mencionaré cuando sea útil.
‫Por ejemplo esto. La extensión env aquí será
‫útil para resaltar las variables ambientales en a. n archivo.
‫Así que repasemos rápidamente algunos de ellos.
‫Por ejemplo, ESLint es útil para encontrar errores en nuestro código y, de
‫hecho, vamos a configurar ESLint con el nodo un poco
‫más adelante en otra sección.
‫Tenemos una vista previa de imágenes, que es una pequeña
‫extensión muy agradable para obtener una vista previa de las imágenes.
‫Y quizás hayas notado que cuando estábamos haciendo esto, por ejemplo,
‫la muestra
‫aquí ves que aquí en el lado izquierdo
‫muestra todas las imágenes que incluimos en un sitio web.
‫Entonces en este ejemplo es este.
‫Muy bien, solo algo pequeño que encontré muy útil.
‫¿Qué más tenemos aquí?
‫Tenemos Prettier y este es
‫el que quiero configurar contigo en este
‫video, pero por ahora repasemos
‫otro aquí.
‫Entonces, Pug es un lenguaje que usaremos más adelante
‫para crear plantillas,
‫por lo que es útil tener esta
‫extensión de embellecimiento para esa también.
‫Luego también tengo TabNine, que a veces hace
‫un buen autocompletador mágico.
‫Luego también tengo TODO Highlight,
‫que es muy útil para
‫hacer este tipo de
‫magia aquí.
‫Por ejemplo cuando
‫tengo TODO, lo resaltará en este color
‫verde o si escribo BUG
‫así se pondrá rojo
‫o FIXME y tengo
‫todo tipo de estas palabras clave aquí que
‫tengo que buscar los diferentes
‫colores para hacerlas visibles en mi código.
‫E incluso aparece aquí en esta
‫barra de desplazamiento.
‫Si tuviera estos en
‫diferentes líneas, entonces vería que los tres
‫colores están ahora aquí en este
‫lado y esto es increíblemente útil.
‫Está bien.
‫Y luego, por supuesto,
‫mi tema de
‫código VS, que es Oceanic
‫Next, así que recibo esta pregunta todo
‫el tiempo y, en lugar de
‫preguntarla bien, aquí está la respuesta para eso.
‫Está bien.
‫Pero
‫ahora, ¿dónde está?
‫Así que más bonita, esta
‫es una extensión muy agradable que
‫puede formatear el código automáticamente,
‫sin importar si es
‫JavaScript, CSS o
‫incluso HTML.
‫Con esta extensión ya no tenemos que
‫preocuparnos por el formato.
‫Y en realidad es muy
‫obstinado, por lo que sigue un conjunto
‫de reglas muy estricto con solo una pequeña configuración posible.
‫Pero en este caso de formateo de
‫código, en realidad es muy bueno cuando alguien
‫más toma estas decisiones por usted.
‫Así que esa es una cosa menos de la que tenemos que preocuparnos.
‫De acuerdo, nuestro código se
‫formateará automáticamente sin que tengamos que hacer
‫nada o preocuparnos por un estilo determinado.
‫¿Okey?
‫Entonces, si
‫desea probarlo, continúe e instálelo ahora aquí.
‫Probablemente tengas un botón de instalación.
‫Yo, por supuesto, ya lo tengo instalado.
‫A continuación, lo que debe hacer para obtener todo el
‫poder de esta
‫extensión es ir a su configuración
‫y luego activar Formatear al guardar.
‫Así que
‫busque el formato y luego Formatee en Guardar.
‫Entonces, cada vez que guardemos un
‫archivo ahora, automáticamente usará Prettier para formatear nuestro código.
‫Así que instalamos Prettier.
‫Activamos Formatear en Guardar.
‫Y ahora podemos configurar un poco más Prettier.
‫Una vez
‫más, como mencioné, es muy obstinado.
‫Así que no hay muchas cosas que
‫podamos cambiar, pero algunas cosas sí podemos cambiar.
‫Ahora podríamos hacer eso aquí,
‫directamente en el código
‫VS, pero
‫lo que también podemos hacer es definir un archivo de configuración.
‫¿Okey?
‫Y me parece que es mejor hacerlo.
‫Entonces, en lugar de usar el código VS para definir
‫la configuración, podemos usar una configuración
‫Prettier,
‫que se llama Prettier RC.
‫Muy bien, tiene un punto y luego un
‫rc más bonito.
‫Luego abrimos las llaves
‫y luego aquí podemos definir algunas configuraciones.
‫Y me parece mejor hacerlo así porque
‫entonces puedo cambiar configuraciones
‫de un proyecto a otro.
‫Y lo
‫que es más importante, facilita que
‫varios desarrolladores del mismo equipo utilicen la misma configuración.
‫De acuerdo, eso puede ser muy útil para los equipos.
‫Incluso más útil que cuando solo trabaja por su cuenta.
‫Ahora, la única configuración que realmente quiero cambiar aquí
‫se llama comillas simples.
‫Entonces, en realidad, Prettier ya tiene esta función
‫de autocompletar incorporada y, por lo tanto, sabe que simple
‫significará comillas simples.
‫Y el valor predeterminado es falso, pero quiero establecerlo en verdadero.
‫Entonces, lo que va a hacer es que todas
‫mis comillas cambiarán de comillas dobles a comillas simples, ¿de acuerdo?
‫Así que lo guardé y aquí
‫está nuestro índice. js.
‫Y ahora veamos si hay comillas dobles aquí y creo que no lo
‫son porque de
‫todos modos usé las comillas simples de manera bastante consistente.
‫Pero pongamos algunas comillas dobles en algún lugar aquí y ahora lo
‫guardaré y echaré
‫un vistazo a lo que sucede.
‫¡Vaya!
‫Primero que nada, vieron que muchas cosas cambiaron aquí
‫y nuestro código saltó por aquí,
‫pero aquí es donde tenía las comillas simples aquí.
‫Entonces ves que vuelven a ser las comillas dobles.
‫Ahora, todo este código saltando probablemente se
‫debió a que en algún momento tuve varias líneas.
‫Y Prettier no lo permite.
‫Entonces, si tengo algo como esto y
‫lo guardo, Prettier solo permitirá una línea en blanco.
‫Y de hecho, este fue para mí el cambio más difícil
‫de todos los formatos que hace Prettier.
‫Y no es configurable,
‫por lo que no podemos cambiar eso, lamentablemente.
‫Porque a veces me gusta tener varias líneas, pero
‫con Prettier eso no es posible.
‫Puedo hacer algo como esto y
‫luego funcionará, pero es solo una solución.
‫Pero aún con este problema, realmente prefiero usar Prettier.
‫Nuevamente porque le quita la idea de
‫formatear.
‫Por ejemplo, otra cosa que hice aquí fue esto.
‫Entonces, siempre que se exceda un cierto número
‫de caracteres en
‫una línea, encontrará una buena manera de dividir el
‫código en varias líneas.
‫Y eso es lo que hizo aquí.
‫Veamos qué más tenemos aquí.
‫Bueno,
‫creo que tal vez, además de este
‫cambio, enseñamos que todo sigue igual.
‫De acuerdo, de ahora en adelante, en el resto de los
‫códigos
‫de este curso, siempre usaré este archivo de configuración de PrettierRC
‫con guardado automático en verdadero.
‫Bueno.
‫Otra cosa que
‫no mencioné es que pone automáticamente el punto y coma,
‫así que si sigo adelante y elimino
‫este, y este, y este.
‫Dale una oportunidad.
‫Ves que han vuelto.
‫¿Está bien?
‫Ahora, si desea obtener
‫una descripción general de todas las cosas que puede configurar
‫con Prettier, bueno, eso es muy simple si escribimos Prettier en Google.
‫Así que se posicionan como formateadores de código obstinados.
‫Y como les
‫dije antes y aquí abajo tenemos las opciones
‫que realmente podemos configurar.
‫Así que imprime el ancho.
‫El ancho de la pestaña.
‫Entonces, si eres una de estas personas que usa cuatro
‫anchos, lo que yo era hasta hace poco, como
‫hace un año.
‫Bueno, entonces puede configurar eso usando el ancho de la pestaña,
‫entonces tiene, por ejemplo, las comillas que acabamos de cambiar.
‫Así que, entre comillas simples, lo hacemos realidad y tienes
‫todo tipo de cosas.
‫De hecho, puedes verlo aquí en el lado derecho, ¿de acuerdo?
‫Pero de nuevo, no es mucha configuración.
‫Así que la mayoría de las cosas no se pueden cambiar.
‫Otra cosa con la que podemos experimentar es el ancho de la pestaña.
‫Así que veamos este, creo que el valor predeterminado es 80.
‫Pongámoslo en algo así como 120.
‫Y pensé
‫que esto cambiaría este fragmento de código aquí, volviendo a
‫lo que teníamos antes, todo
‫en una línea.
‫Solo para mostrarte.
‫Pero tal vez nuestra línea sea incluso más larga que eso.
‫Así que pongamos algo realmente ridículo aquí como 200
‫y ¡guau!
‫¿Que esta pasando aqui?
‫¡Ah ho! Entonces ves que en realidad ahora
‫se ha cambiado a algo aún más extraño.
‫De acuerdo, nunca hice una especie de experimento.
‫Vuelva a ponerlo en 120 y
‫¿qué está pasando aquí?
‫Déjame arreglar esto rápidamente.
‫Y lo vuelve a hacer, de acuerdo.
‫Póngalo de nuevo a 80
‫como lo teníamos y ahora se ve así.
‫¡Oh
‫sí!
‫Oh lo siento.
‫Eso no es lo que quería hacer.
‫Por supuesto, no quería cambiar el ancho de la
‫pestaña cuando mi valor predeterminado es dos.
‫Quería cambiar el ancho de impresión.
‫Entonces, básicamente, qué tan ancha puede ser una línea.
‫Oh, eso fue realmente estúpido.
‫Así que ahora ha vuelto a la normalidad porque el valor predeterminado es dos.
‫Así que sí, ahora puede ver que en realidad volvió
‫a estar en una línea aquí porque en este punto aquí estamos en la
‫columna 96.
‫Como ve aquí abajo, el límite es 120.
‫Y así no tuvo que envolver esta línea de
‫código en la segunda.
‫¿Okey?
‫Pero en realidad me gusta este límite de 80,
‫así que lo volveré a poner
‫aquí y lo usaré en el futuro.
‫Así que ajusté el valor predeterminado, así que déjame deshacerme de él.
‫Dale una oportunidad.
‫Y así volvemos a ser como antes.
‫Entonces, si crees
‫que te gusta esto, adelante y úsalo como yo.
‫Pero si no, bueno, simplemente ignora todo lo que dije
‫en este video y
‫sigue haciéndolo de la manera más normal.
‫Así que tampoco hay problema.