Dos desarrolladores compartiendo código con la extensión live share de Visual Studio Code

Cómo compartir tu código en Visual Studio Code con Live Share

Como desarrollador front-web, compartir tu código y trabajar en tiempo real con otros miembros del equipo puede ser clave para mejorar la colaboración y optimizar el flujo de trabajo. Afortunadamente, Visual Studio Code tiene una extensión llamada Live Share que facilita este proceso de manera rápida y sencilla. A continuación, te explico cómo usarla.

¿Qué es Live Share?

Live Share es una extensión de Visual Studio Code que permite compartir tu entorno de desarrollo con otros usuarios de manera colaborativa. Puedes compartir no solo el código, sino también el terminal, depuración y el servidor de desarrollo, todo en tiempo real.

Pasos para compartir tu código

1. Instala la extensión Live Share

Para empezar, necesitas instalar la extensión Live Share desde el marketplace de Visual Studio Code. Ve a la pestaña de extensiones (ícono de cuadrado en la barra lateral izquierda) y busca "Live Share". Haz clic en Install y espera a que se descargue.

Enlace de la extensión

how to install live share vscode capture

2. Inicia una sesión de Live Share

Una vez que hayas instalado la extensión, verás un nuevo ícono en la barra de actividades de Visual Studio Code, similar a una flecha de compartir. Aquí tienes varias opciones, puedes seleccionar solo mostrar tu código o también dar acceso para que lo editen tus compañeros. Live Share generará un enlace que puedes compartir con tus compañeros de equipo.

Vscode Live Share pluguin options

Al darle a una de estas opciones te aparecerá una opción para iniciar sesión con una cuenta o bien te GitHub o de Microsoft, en este ejemplo usaremos una cuenta de GitHub, al seleccionarla te aparecerá un cuadro de dialogo que te redirigirá al navegador donde debes hacer login con tu cuenta de GitHub, en este paso Visual Studio Code pedirá varios permisos de acceso a tu cuenta de GitHub, debes darlos. 

Git Hub Login Vscode Live Share

Una vez completado este paso saldrá una alerta en la web que te redirigirá de nuevo a tu Visual Studio Code y aquí si usas Windows es posible que te pida permisos para habilitar Visual Studio Code como una excepción en el firewall. 

Ahora si ya deberíamos estar listos para compartir sesión. 

3. Comparte el enlace

 

Live Share Invite Participants Capture

 

Después de iniciar la sesión, se generará un enlace único que podrás copiar y enviar a la persona con la que quieras colaborar. Para copiarlo puedes hacer clic en la interfaz "Invite participants... y esto copiará automáticamente el enlace. Tus compañeros solo necesitan hacer clic en el enlace, y Visual Studio Code abrirá automáticamente la sesión compartida. Asegúrate de que ellos también tengan la extensión Live Share instalada en su Visual Studio Code. 

4. Opciones de colaboración

  • Edición simultánea: Ambos podrán editar el código en tiempo real. Verás el cursor del otro usuario en el archivo que está editando, lo que facilita la colaboración.
  • Terminal compartido: Puedes decidir si también deseas compartir tu terminal. Esto es útil si estás ejecutando un servidor local o ejecutando comandos de npm o webpack.
  • Depuración en equipo: Si ambos trabajan en un proyecto que requiere depuración, Live Share te permite compartir también las sesiones de depuración, lo cual es ideal para identificar y solucionar errores juntos.

5. Finaliza la sesión

Cuando termines de colaborar, puedes cerrar la sesión de Live Share haciendo clic en el mismo ícono de Live Share, luego en el Icono de Stop (Stop Live Session). Esto eliminará el enlace y finalizará el acceso al entorno compartido.

Ventajas de usar Live Share

  • No necesitas que los demás instalen todo el proyecto ni configurar el entorno de desarrollo. Solo necesitan tener Visual Studio Code y la extensión Live Share.
  • Es ideal para revisiones de código, pair programming o incluso para enseñar a alguien cómo solucionar un problema en tiempo real.
  • La extensión es liviana y no consume muchos recursos, por lo que no afectará demasiado al rendimiento de tu editor.

En resumen, Live Share es una herramienta poderosa y fácil de usar que te permitirá colaborar de manera más eficiente con otros desarrolladores. Ya sea que estés trabajando en un proyecto en solitario o en equipo, esta extensión puede hacer que compartir y colaborar en código sea más sencillo y productivo.

Code In Progress with ❤️ by Juan Pablo Amador