10 extensiones para Visual Studio Code

Visual Studio Code se ha convertido en el editor de código más usado por los desarrolladores por su gran variedad de características útiles para agilizar el trabajo. Uno de sus puntos fuertes es que posee una biblioteca de extensiones, las cuales agregan un sinnúmero de opciones a implementar para ser más eficientes al momento de programar.

Debido a su utilidad, comparto 10 extensiones indispensables para Visual Studio Code, con las que tendrás  un mejor desempeño en tus proyectos.

1) Prettier

Esta herramienta permite diseñar el formato del código que escribimos, es decir, nos ayuda a ordenar nuestro código para verlo y leerlo con mayor facilidad. De esta manera automatizamos el proceso ahorrando tiempo, posibles errores y disputas sobre el formato del código al trabajar en equipo, haciéndolo ver de manera profesional. En inglés es conocido el término de Code Formatter.

Su función principal es indentar el código o generar las sangrías que añadimos al código, lo cual es importante cuando usamos herramientas de debugger de JavaScript, breakpoints o lenguajes como Python, mismos que funcionan de esa manera. Si quieres más información, puedes visitar su página oficial.

En este ejemplo vemos una hoja de estilos (CSS) donde el código se encuentra desordenado.

Pulsamos clic derecho sobre el contenido y seleccionamos la opción de Dar formato con.

Seleccionamos Prettier y ¡listo!

2) Import Cost

Con un funcionamiento sencillo, te dirá el peso de los paquetes que has instalado en tus proyectos, facilitando saber de cuánto ha sido el incremento de tamaño en tus proyectos, al tiempo que te permitirá tener un control del proceso.

En nuestro archivo podemos ver los comentarios al lado derecho de nuestras importaciones. Eso es la extensión e indica el peso de cada paquete instalado. Puedes encontrar la extensión en el marketplace de Visual Studio.

3) Live Server

Esta herramienta indica cada cambio que realicemos en nuestro proyecto sin la necesidad de hacer clic en el botón actualizar en el navegador o en F5, ya que al momento de guardar un cambio en nuestro IDE la página se actualizará automáticamente, lo cual ahorra tiempo en algunas ocasiones.

Lo que debemos hacer es darle clic en el botón Go Live y se abrirá la página en la que trabajamos. Luego haremos nuestros cambios y se reflejarán automáticamente sin movernos hacia el teclado y el ratón para refrescar la página. Puedes encontrar la extensión en el marketplace de Visual Studio.

⚠️ Otra manera de acceder es: clic derecho y seleccionar Open with Live Server.

4) Better Comments

Una forma para nunca perder la pista sobre lo que hace tu código es comentar cada pieza del mismo, por lo que esta extensión es sumamente recomendada pues te ayuda a agregar distintos colores a los textos.  Con esto podrás hacer que tu código se vea más ordenado y priorizar según los colores del comentario que acabas de añadir.

Para configurar Better Comments, ve a la extensión y selecciona Configuración de la extensión.

Ahora damos clic en el texto azul (Editar en settings.json).

Luego vamos a la parte de better-comments.tags:

Para crear uno, copiamos el formato del objeto que viene por defecto y editamos el valor de sus propiedades: Por ejemplo, agregamos en tag lo que usaremos como comando de comentario. Acá agregué con + y ==.

A la derecha tenemos un archivo JavaScript que acepta los distintos colores. Si necesitas más información, visita el marketplace de Visual Studio.

⚠️ Nota: Acepta los comentarios de tu lenguaje de manera normal, solo agrega el tag que agregaste ya sea en fila o en grupo de líneas.

5) Auto Close Tag

La manera en cómo funciona esta extensión es simplemente sencilla y fácil de utilizar.  Cuando escribes tu código, siempre existirá alguna ocasión en la que olvides agregar la etiqueta u otra parte del código para cerrar dicha sección.

Sin embargo, con Auto Close Tag no sucederá nunca más, pues al momento de tu poner la primera parte del código, la extensión detectará automáticamente lo que intentas hacer y te ayudará autocompletando, de forma que cerrará de manera instantánea la etiqueta. Esto será muy útil si eres nuevo/a o si olvidas este tipo de detalles.

Ejemplo: Creé aquí la etiqueta div para completarse automáticamente. Para descargarla o tener más información, visita el marketplace de Visual Studio.

6) SVG

Una herramienta sumamente útil para quienes gustan  editar imágenes SVG. Una vez instalada la extensión, debemos  buscar el archivo SVG en nuestro IDE y lo abriremos, pues allí haremos los cambios. Luego de esto, insertamos Ctrl/Cmd + Shift + P en nuestro Visual Studio Code. Se abrirá una pequeña ventana en el visual en donde escribiremos Preview SVG. Acto seguido, se mostrará la imagen SVG y podremos aplicar los cambios que deseemos a nuestro archivo SVG.

Otra manera de acceder es clic derecho y seleccionar Open Preview, con lo que se  abrirá una ventana mostrándonos el svg y con acceso al código para editarlo fácilmente.

7) Image Preview

Con esta herramienta visualizamos la imagen que queramos agregar a nuestro código. Un ejemplo es usando HTML: vemos que sale a la izquierda en miniatura y, si hacemos hover sobre el src de la imagen, la vemos un poco ampliada sobre el cursor. Puedes descargar la extensión en el Marketplace de Visual Code .

8) AutoProfixer

Esta herramienta es necesaria para agregar todos los vendor necesarios en nuestro archivo CSS. Estos son los prefijos que se agregan a algunas propiedades para que sean compatibles con los navegadores. Si deseas más información, visita el Marketplace de Visual Studio.

Otro ejemplo: Tenemos un archivo CSS con las siguientes propiedades y queremos agregarles los prefijos. Se accede con la paleta de comandos (Ctrl+Mays+P en Windows) y escribimos Autoprefixer:Run. Veremos como se agregan automáticamente:

9) Booksmarks

Cuando se crean proyectos grandes, tendemos a tener muchos archivos en distintas carpetas con muchas líneas de código. Por muy ordenado que este se encuentre, lo más probable es que nos perdamos en la búsqueda de algo específico. Para evitar esto, te recomiendo usar Bookmarks, el cual genera una señal donde desees y así puedas moverte más fácilmente a ese lugar en específico.

En esta hoja tenemos una gran cantidad de líneas:

Vamos sobre la línea que queremos marcar y nos dirigimos al lado izquierdo de Visual Studio Code. Hacemos clic en Bookmarks y seleccionamos el botón azul Bookmarks: activar.

A continuación, vemos cómo se marca un listón azul al lado de la línea donde estamos con el cursor y, a la derecha, vemos un explorador de la extensión que nos muestra todas las marcas que hagamos. En este caso, solo tenemos la recién creada. Si deseas información más detallada, acude a su documentación oficial.

10) Snapcode

Si deseamos compartir código, pero no deseamos que salga la interfaz de nuestro Visual Studio Code, entonces podemos usar Snapcode. En caso de que deseemos emplearlo, abrimos la paleta de comando y escribimos snapcode:

Vemos cómo se divide nuestra ventana y visualizamos las instrucciones a seguir:

Copiamos el código y lo pegamos en la imagen que aparece, dentro de la parte oscura:

En la parte inferior, el botón debajo de la parte donde copiamos es el que captura la imagen. Al darle clic guardamos la imagen localmente y quedará así:

Para descargar la extensión, búscala en el Marketplace de Visual Code.

¡Eso es todo! Con estas extensiones tu labor será mucho más sencilla y ordenada. Espero que esta información haya sido de mucha ayuda.

Nos vemos pronto. ¡Éxito!