Visual Studio Code es hoy por hoy el editor de código más usado en el mundo de la programación. Si bien se especializa en desarrollo web, se puede usar casi que con cualquier lenguaje y se puede personalizar completamente gracias a sus miles de extensiones disponibles.
Además, Visual Studio Code es gratuito, Open Source y también funciona en web sin instalar nada desde github (ya que fue creado con HTML, CSS y JavaScript).
Si ya tienes experiencia programando en Visual Studio Code seguramente tienes tu colección de plugins y configuraciones y tu modo de trabajar bien definido. Pero si estás comenzando en la programación, en este blog te enseñaré las 7 extensiones que debes usar para convertirte en un gran programador.
¿Cómo instalar una extensión en VSCode?
Instalar una extensión es muy sencillo. Solo haz click en el ícono de extensiones en el activity bar. Luego buscas la extensión que quieres y le das click a instalar. Desde ahí también puedes desinstalar extensiones o desactivarlas.
💡Super tip: Si no ves la barra latera es porque la ocultaste. Para volver a verla solo ve al menu View > Appareance > Activity bar
1. Live Server
Es una extensión imprescindible para comenzar. ¿Por qué? Porque crea un servidor web local para que puedas escribir código y cada que guardes los cambios verás los resultados en el navegador en automático.
2. Emmet
Emmet es la extensión más útil que existe para escribir HTML y CSS, ya que estos lenguajes se caracterizan porque hay que escribir mucho código y emmet nos da atajos sencillos de recordar para escribir HTML y CSS super rápido.
Por ejemplo, en HTML basta escribir el nombre de la etiqueta y darle tab para que se escriba completa.
Si queremos escribir una etiqueta padre y una hija basta escribir padre > hijo, por ejemplo div > p y presionar tab.
Si queremos escribir varias etiquetas hermanas, usamos el símbolo * para multiplicar. Por ejemplo div*5
En CSS da atajos para propiedades y valores. Por ejemplo bdrs es border-radius o mb es margin-bottom. Estos atajos son intuitivos y no hay que memorizarlos, se deducen.
3. Live Share
Live share convierte Visual Studio Code en un Figma o en un Google Docs porque puedes tener a todo tu equipo trabajando en el mismo proyecto. Verás el cursor de cada uno para saber que están trabajando.
También tienes un chat para poder colaborar, compartir ideas y pelear 😄.
Lo único que tienes que hacer para usarlo es iniciar sesión con una cuenta de GitHub o de Microsoft y compartir el link que te da Live Share con tus compañeros. También es una excelente opción si tienes un tutor y necesitas que te ayude con tu código.
No tiene un servicio de audio, pero puedes hacer una llamada de Google Meet, Zoom, Discord o lo que quieras para poder conversar. O también puedes instalar la extensión Live Share Audio que agrega conversaciones de audio desde el mismo VS Code.
4. CodeSnap
Te ayuda a compartir tu código como imagen que se vea atractiva. Por ejemplo, si acabas de aprender algo nuevo, puedes compartir una captura de tu código en redes sociales.
Si tienes que hacer una presentación con diapositivas que incluya extractos de código o quieres hacer un post en Instagram, CodeSnap es la mejor extensión.
Lo único que tienes que hacer es ejecutar CodeSnap con Ctrl/Cmd Shift P escribe CodeSnap y listo.
Desde su configuración puedes agregar números de línea, cambiar el color de fondo (o hacerlo transparente) entre otras cosas.
5. Better Comments
Comentar el código es importantísimo para que tu yo del futuro y tus compañeros entiendan mejor el código. Con la extensión Better Comments puedes mejorar tus comentarios (como dice el nombre) usándolos para indicar tareas, alertas, preguntas y más.
6. GitLens
Si estás empezando en la programación debes aprender Git. Si no lo conoces, Git es la herramienta número 1 en el mundo de la programación para hacerle seguimiento a tus proyectos, trabajar con otros programadores y puedes aprenderlo en EDteam con este curso: GIT desde cero.
GitLens es una extensión que ayuda a visualizar todo el historial de Git. Es decir, en lugar de usar la terminal, GitLens te muestra quien hizo los cambios de cada línea de código y el historial directamente desde el código. Además de muchas otras funciones que puedes ver en su sitio web.
Ten en cuenta que GitLens es gratuito para proyectos en solitario y públicos. En otros casos deberás pagar.
7. CSS Peek
Cuando tu código CSS y HTML crece, no sabes qué estilos se le aplican a qué clase. Por ejemplo ves esto en tu html <div clas="component primary third-style"> seguro que no tendrás ni idea de qué estilos se aplican a esas clases y en qué archivo CSS se encuentran.
CSS Peek te facilitará mucho el trabajo porque te muestra en que línea el código CSS está siendo aplicado a una clase HTML. Incluso puedes editar ese código CSS sin salir del documento HTML.
Por cierto, si quieres aprender CSS con buenas prácticas tenemos el mejor curso en español y puedes ver las primeras clases gratis.
Y ahora, ¿cuántas extensiones de este top vas a instalar? Espero que todas 😁. Si tienes una extensión favorita y no la mencionamos, déjanosla en los comentarios para seguir aprendiendo. Yo soy Deiv y recuerda que esto #LoAprendisteEnEDteam.