En esta ocasión quiero hablaros de las 5 extensiones que utilizo cuando tengo que escribir código en Visual Code. Cuando empecé el curso de Front-end developer nos tuvimos que instalar un editor de código. Nos dieron varias opciones, entre ellas estaba Visual Code y otra que es Sublime text que ya había usado anteriormente para un curso que hice de paginas web dinámicas con php. En esta ocasión elegí Visual Code, porque es totalmente gratuito y además es mucho más sencillo instalar las extensiones. La verdad, creo que no me equivoqué. A ello vamos.
Descargando e instalando Visual Code
Para descargar Visual Code es tan sencillo como ir a la pagina de Visual Code, descargar el instalador e instalarlo. Ningún misterio. Os dejo el enlace de descarga:
https://code.visualstudio.com/download
Instalando extensiones
Para instalar extensiones debemos ir al menú vertical que tenemos a la izquierda una vez abrimos el programa. En concreto al ultimo icono, una especie cuadrado dividido en 4 cuadrados en el que el segundo quiere escapar. Clicamos encima y se nos abre una extensión con un buscador arriba del todo. Y en ese buscador es donde vamos a poder encontrar todas las extensiones que deseemos instalar. Una vez busquemos la extensión y la encontremos justo a la derecha abajo del cuadro de info de la extensión nos sale el botón de instalar. Fácil, no?
Idioma Español
La primera extensión que yo instalo es la del idioma. La verdad es que seria buena opción dejarlo en ingles, ya que el código es en inglés y deberíamos empezar a familiarizarnos con el idioma. Pero para los que no tenemos un nivel muy aceptable de inglés, nos va bien el idioma español. Hay que decir que no es para el código, es solo para las configuraciones del programa, pero si lo podemos usar en inglés creo que seria mejor, porque nos tendremos que poner las pilas con este idioma si queremos aprender a programar y trabajar con eso.
Para instalarla nos vamos al icono de extensiones, y en el buscador ponemos Spanish. Ojo, no español, hay de lenguaje latino, pero si queremos español de España debemos escribir Spanish. Sale como una bola del mundo. Clicamos en instalar y reiniciamos el programa. Ya tenemos nuestra primera extensión instalada.
Emmet Live
Emmet live es una extensión que va de maravilla, sobretodo para los que somos muy vagos, como es mi caso xD, pero la verdad que nos ahorra tiempo y que algunas cosas dejen de funcionar por olvido de llaves, etc. Esta extensión lo que hace es autocompletar líneas de código y además tiene atajos. Ej. si yo escribo div y le doy a tabular, me crea la caja div y la cierra, lo mismo que esto: <div></div>.
Solamente tabulando y con todas las etiquetas, de esa forma, te olvidas de cerrar y vas mucho mas rápido. Además tiene algunos atajos, como por ej: div*5. En esta ocasión cuando tabulamos abre y cierra 5 div’s uno debajo de otro. Puede crear las cajas que quieras con las id o clases que quieras y así, mil funciones más y otras mil que yo desconozco. El único problema que le veo es que puede que se te olviden algunas cosas de no escribirlas y si algún día no dispones de la extensión, que hacemos? Pero pienso que es imprescindible.
Para instalarla, lo mismo que antes, extensiones y en el buscador escribimos Emmet Live.
Auto-Save on window change
Esta extensión es muy práctica, ya que a veces se nos olvida el command+S para guardar el archivo (Mac) y cuando vamos al navegador y refrescamos todo sigue igual. Y es que si no guardamos el archivo antes de refrescar el navegador, no vamos a ver los cambios. Por eso va bien Auto-Save, porque te olvidas de eso. Estas escribiendo código y de repente quieres refrescar para ver como van los cambios. Esta extensión, en cuanto cambias de ventana y usas otra que no sea la de Visual Code, guarda el archivo. De esta manera nos ahorramos guardar o volver de nuevo a Visual Code si lo hemos olvidado.
Esta extensión la buscamos como Auto-Save on Windows Change.
Live server
Esta extensión nos permite abrir nuestro código en una ventana del navegador solamente con darle a botón derecho y escoger la opción open with Live Server. Para que nos sirve, pues cuando estamos en ese momento que tenemos varias ventanas y no nos cabe nada en la pantalla y decidimos cerrar el navegador.
Después es tan sencillo como hacer botón derecho y escoger open with live server para que el navegador solo se abra con la pagina en la que estamos trabajando. Además complementa bien con Auto Save on Window Change, porque nada mas cuando hacemos click en esa opción y abrirse el navegador detecta que salimos de Visual code y nos guarda la configuración, de esa forma nuestra página estará siempre refrescada y la abrimos de una manera muy sencilla.
Esta extensión hay que buscarla como Live Server
Bracket Pair colorizer
De lo mismo que hace esta extensión hay varias extensiones disponibles. Yo escribo sobre esta porque es la que uso, pero podréis encontrar más en el buscador de extensiones. Esta extensión es muy práctica. Lo que hace es cambiar de color llaves, paréntesis y diferentes elementos mas. ¿Para que sirve diréis? ¿Queda más bonito? Sí, efectivamente, queda mas bonito, porque son colores chillones, rosa fluorescente, etc. Pero no solamente sirve para eso, esa es la menor de sus virtudes. Realmente lo que hace es ayudarnos a encontrar donde estamos fallando.
A veces te olvidas una llave, un paréntesis, etc. No sabes donde y no hay manera de que funcione el código ni a tiros. ¡Que lio! Horas y horas revisando y naa. Luego le preguntas al profe y te lo dice claro, ellos lo encuentran muy rápido, pero si tienes esta extensión, sabrás que, si hay una llave abierta con ese color, tiene que haber otra cerrada con ese mismo color. Búscala y mira si esta en el lugar correcto o si no la has puesto. Ya, cuando tienes varias llaves, varios paréntesis y varios de más, pues ni te cuento como va esta extensión, Espectacular.
Esta extensión hay que buscarla como Bracket Pair Colorizer
Concluyo
Y esto es to-to-to-to-to do amigos. Seguramente habrá quien lea y piense que me he dejado unos cuantos, pero claro, los que somos junior, todavía desconocemos para que sirven la infinidad de extensiones que se curra la peña para la infinidad de lenguajes de programación en los que se puede programar con Visual Code. ¿Y vosotros? ¿Tenéis alguna extensión más que sea interesante? ¡¡Si es así dejármela en los comentarios!! ¡Un saludo!
