Glaucia Lemos

Posted on Jun 7, 2019

¡14 Tips para optimizar su Visual Studio Code!

#webdev #vscode #plugins #tools

¡El Visual Studio Code se convirtió en el IDE más querido de los desarrolladores y uno de los más utilizados por todos - independientemente del lenguaje de programación que está codificando 😍!

Pero, lo que pocos saben es la gran cantidad de recursos y plugins que ya están disponibles en Visual Studio Code a través de Market Place.

Muchos desarrolladores, cuando estoy realizando un live streaming en Youtube o Twitch, me preguntan sobre algunos plugins y extensiones que utilizo en mi Visual Studio Code y ese post es justamente sobre eso: cómo optimizar su Visual Studio Code para agilizar para desarrollar aplicaciones o incluso para realizar un deploy de su aplicación directo de su Visual Studio Code.

¡Aquí vamos! 😃

¡¿Vamos a optimizar el Visual Studio Code?!

Una de las mayores preguntas que todos me hacen es con respecto a ciertos plugins que utilizo en mi código de Visual Studio. Voy a hablar de algunos de ellos que más me gusta y que recomiendo a cualquier desarrollador para instalar.

Pero, antes claro, se hace necesario ya haber instalado en sus máquinas el Visual Studio Code. Si no tienes, basta con acceder al enlace abajo:

Recordando que, cada mes tiene nuevas features y novedades para el Visual Studio Code. Y está disponible para su uso tanto en Windows, Linux y Mac! ¡Entonces, aprovechen y usen!

¡Vamos el primer tip! 😊

Tip #1 — Beautify

Beautify es una de las extensiones más conocidas por todos los desarrolladores aquí.Porque de hecho hace su papel, que es: idente su código: HTML, CSS, Sass, JavaScript y JSON para dejar los códigos dentro del patrón de formato y de manera legible.

Recomiendo el plugin y si quieren utilizar, basta instalarlo en su Visual Studio Code con el link abajo:

Este tip es nuevo para muchos desarrolladores. Porque muchos desconocen esta increíble extensión disponible para el Visual Studio Code.

Tip #2 — BookMarks

¿Sabes cuando tienes que usar marcardores en algunas líneas de código y no sabes cómo vas a hacer?

¡La intención de BookMarks es justamente esa! Ayudarle cuando tenga que marcar alguna o varias líneas de código que tenga que recordar para cambiar o hacer algo importante.

El uso de la extensión es muy simple y dinámico. Recomiendo descargar y probar esta extensión:

Tip #3 — Color HightLight

Color Highlight es excelente para quien trabaja con Css & Sass. ¿Por qué? Pues le ayuda a mostrar los colores que va a crear en un determinado archivo .css

Ayuda bastante y es de gran valor para quien es desarrollador Front-End!

Tip #4 — Dracula Official

Tema es algo que todo el mundo le gusta cambiar en el IDE y poner de acuerdo con la persona. Y uno de los temas más descargados para quien usa el Vs Code es el Dracula.

La extensión viene con varios colores y temas que usted puede cambiar de acuerdo a su gusto. He utilizado mucho el tema Dracula Dark. Pero, en el siguiente tip, mencionaré otro tema que he usado y disfrutado bastante! 😊

Si desean experimentar el tema Dracula, sólo descargar con el link abajo:

Tip #5 — Winter is Coming

Después del tema Dracula Dark, particularmente me apasioné por el tema Winter is Coming.

No es por la serie Game of Thrones. Pero, por los colores y la disponibilidad de paletas muy interesantes para ese tema, que a mi ver, son simplemente hermosas! 😍

¡Algo muy importante a mencionar sobre este tema es que fue creado por el gran John Papa - uno de los mayores evangelistas de JavaScript y Angular!

Si desean experimentar este tema increíble, bastan descargar e instalar la extensión en el link abajo:

Tip #6 — Git History

Para aquellos que les gusta una integración de 3d party en sus IDE's, de hecho, poseer el Git History instalado en su Visual Studio Code será una de las mejores opciones que usted tendrá.

Se permite tener una visión en tiempo real si un determinado código que está trabajando ya se ha realizado un commit o push por otra persona.

¡Y lo más interesante es que usted puede acompañar quién fue la última persona que realizó el cambio del código! ¡Además, se puede de una manera mucho más práctico y tranquila realizar el merge!

Echar un vistazo a este gif para que pueda observar lo interesante es esta extensión:

Es una de esas extensiones que prácticamente son obligatorias poseer en su Visual Studio Code. Así que recomiendo Git History. Si desean experimentar, abajo el link para descargar:

Tip #7 — GitLens

El tip 7 es prácticamente un complemento del tip 6. Una vez que el papel de la extensión GitLens tiene como objetivo ayudar al desarrollador a verificar quién alteró el determinado archivo o incluso una determinada línea en el git.

Vean cómo funciona GitLens:

Una vez instalado el Git History en su Visual Studio Code, recomiendo descargar el GitLens:

Tip #8 — Guides

Guides es una extensión que te ayudará a saber si su código está debidamente indentado. ¿Pero como?

La extensión crea líneas imaginarias. Por ejemplo, verificará si está cerrando un 'if' / 'else'.

La imagen abajo nos muestra cómo funciona y también es una extensión que todo desarrollador debe instalar en su Visual Studio Code.

Link para descargar la extensión Guides:

Tip #9 — Live Server

¡Esta extensión, después de descargarla, no querrá saber de otra cosa! ¿Pero por qué? Vamos a la carpeta del proyecto, hacemos clic con el botón derecho sobre index.html y envía al navegador.

Imagine el siguiente escenario: usted está desarrollando una página estática, donde tiene los archivos: index.html, css y javascript. ¿Generalmente lo que hacemos para poder ver en tiempo real si lo que está codificando está de acuerdo?

Bueno ... con la extensión Live Server, ya no tendrás que hacerlo más así! Y es increíble el poder que tiene.

Voy a dejar que el gif les muestra que la extensión es capaz de hacer: 😎

Observe que, basta con hacer clic en el botón 'Live', que pondrá un servidor en el navegador. Y en el momento en que usted hace el cambio en su código ya va actualizando. ¡Que lindo! 😍

¡Lo probé en mi proyecto de AngularJs y funcionó muy bien! Así que, recomiendo mucho descargar esa extensión:

Tip #10 — Path Intellisense

¿Quién nunca, tuvo la dificultad, principalmente para quien es desarrollador JavaScript o Front-End, cuando usted trabaja en un proyecto con innumerables carpetas y necesita hacer un 'require' de un archivo que está abajo o encima de varias carpetas? Y para empeorar, no puedes llegar al path correcto de ese archivo?

Me gustaría decir que este problema ya no tendrá. Conozca: Path Intellisense. Esta extensión te va a ayudar justamente en esa parte: en encontrar de una manera muy rápida y dinámica la ruta de un determinado archivo que necesitas referenciar.

Observe en el gif cómo funciona la extensión:

Esta es una de esas extensiones que son prácticamente 'obligatorias' instalar en su Visual Studio Code y recomiendo descargar:

Tip #11 — Rainbow Brackets

Esta extensión le recomiendo para quien desarrolla con lenguajes que hacen uso demasiado de corchetes, como por ejemplo: Node.js, JavaScript entre otras.

¿Quién aquí nunca se perdió, si el corchete fue de hecho cerrado? Siempre me pierdo, especialmente cuando estoy desarrollando en JavaScript y Node.js.

Entonces para ayudar al desarrollador, esta extensión tiene como objetivo en mostrar - en forma de colores - si usted cerró un determinado corchete.

Abajo el enlace de la extensión Rainbow Brackets

Tip #12 — Live Share

¡Esa es una de las extensiones más lindas que he conocido!

Con Live Share, le permite editar y depurar colaborativamente con otras personas en tiempo real, independientemente de los lenguajes de programación que está utilizando o de los tipos de aplicaciones que está desarrollando. Le permite compartir instantáneamente (y con seguridad) su proyecto actual. Y lo más interesante de esta extensión es que le permite compartir sesiones de depuración/debugging, crear instancias de terminal, aplicaciones web webhost, llamadas de voz y muchas otras cosas muy interesantes!

Para aquellos que tienen equipos de desarrollo que trabajan de manera remota o incluso desean o tienen la cultura de realizar Code Review, es una extensión que va a auxiliar en esas horas.

Si desea saber más sobre Live Share, le recomiendo que eche un vistazo a la documentación de la extensión:

Y si deseas experimentar el Live Share en tu Visual Studio Code, abajo sigue el enlace para instalación:

Tip #13 — VsCode-icons

Me encanta esta extensión. ¿Sabes porque? Pues ella posee innumerables iconos de extensiones de cualquier lenguaje, carpetas o archivos que usted pueda imaginar.

Y ayuda mucho para quien necesita de manera visual, tener una noción en qué archivo está moviendo o desarrollando.

Mira cómo funciona esta extensión:

Y si desea instalar vscode-icons, abajo el enlace de la extensión:

Tip #14 — Azure Tools

Esta extensión le recomiendo para aquellos que usan la plataforma Azure!

Pues sin la necesidad de entrar en el Portal Azure, usted ya tendrá disponible, dentro del Visual Studio Code, las principales características de Azure. Entre ellos:

¡Recomiendo para aquellos que hacen uso de Azure, descargar esa extensión que ayuda y mucho a todos!

Conclusión

El Vs Code tiene numerosas extensiones que te ayudarán a aumentar la productividad de tu trabajo. Sin embargo, sólo tenga cuidado en bajar extensiones que no hace más uso, pues puede dejar lento su Vs Code. Si no utiliza una determinada extensión, desinstale.

Hay un curso bastante interesante y totalmente gratuito para aquellos que desean saber un poco más sobre el Visual Studio Code:

Y recomiendo también, para aquellos que desean aprender a desarrollar una página estática con: HTML, CSS, JavaScript el curso abajo - que también es totalmente gratuito. Y mejor, vas a aprender Git!

Muy pronto, explicaré cómo pueden hacer u deploy/host de una página estática en menos de 10 minutos de una manera sencilla, rápida y totalmente gratuita.

Por lo tanto, estad atentos y sígame en mi twitter.