Tabla de contenido

El trabajo remoto y los equipos distribuidos son cada vez más comunes. Una de las actividades más difíciles de hacer de forma remota es el pair programming: programar junto a otro developer, compartir contexto y resolver problemas en tiempo real. Live Share de VS Code lo hace posible sin necesidad de compartir pantalla.

¿Qué es Live Share?

Live Share es una extensión oficial de Microsoft para VS Code que permite a múltiples desarrolladores editar el mismo código en tiempo real, cada uno desde su propia máquina con su propio entorno y configuración.

La diferencia clave con compartir pantalla es que con Live Share:

  • Cada participante puede mover su cursor de forma independiente
  • El host controla qué archivos son accesibles
  • Los invitados pueden usar su propio tema, fuente y atajos
  • El servidor local del host se puede compartir (el invitado puede ver la web en su propio navegador)

Instalación y requisitos

Instalar la extensión:

  1. Abre la pestaña de extensiones (Cmd+Shift+X)
  2. Busca “Live Share”
  3. Instala la extensión oficial de Microsoft

Requisitos:

  • VS Code actualizado
  • Cuenta de GitHub o Microsoft (para autenticarse)
  • Conexión a internet

La extensión no requiere configuración adicional en la mayoría de redes corporativas, ya que usa HTTPS estándar.

Iniciar una sesión colaborativa

Como host (quien inicia y comparte su código):

  1. Haz clic en el botón “Live Share” en la barra de estado inferior de VS Code (o Cmd+Shift+P → “Live Share: Start Collaboration Session”)

  2. VS Code te pedirá iniciar sesión con GitHub o Microsoft la primera vez.

  3. Una vez iniciada la sesión, VS Code copia automáticamente el enlace de invitación en tu clipboard. Compártelo con tu compañero por Slack, WhatsApp o email.

  4. El enlace se ve así:

https://prod.liveshare.vsengsaas.visualstudio.com/join?XXXXXXXX

Control de acceso como host:

Cmd+Shift+P → "Live Share: Toggle Read-Only Mode"

En modo solo-lectura, los invitados pueden ver pero no editar. Útil para code reviews o explicaciones.

Unirse a una sesión

Como invitado (quien recibe el enlace):

  1. Haz clic en el enlace que recibiste
  2. VS Code se abre automáticamente y te pregunta si quieres unirte a la sesión
  3. Inicia sesión con tu cuenta de GitHub o Microsoft
  4. ¡Listo! Puedes ver y editar el código del host

El invitado ve el proyecto completo del host en el explorador de VS Code. Puede navegar entre archivos, abrir terminales (si el host lo permite) y el servidor del host.

Funcionalidades durante la sesión

Seguir el cursor del compañero:

Haz clic en el avatar del participante en la barra lateral de Live Share. Tu vista se “ancla” al cursor del otro desarrollador y lo sigues automáticamente. Ideal cuando alguien explica algo.

Foco compartido (Follow Mode):

Cmd+Shift+P → "Live Share: Focus Participants"

Centra la vista de todos los participantes en tu posición actual. Útil cuando quieres que todos vean lo mismo.

Selección de grupo:

El host puede seleccionar el archivo o sección de código que quiere que todos vean. Aparece resaltada en los editores de todos.

Terminal compartida:

El host puede compartir acceso a una terminal:

Cmd+Shift+P → "Live Share: Share Terminal"

El invitado puede ejecutar comandos en la terminal del host. El host controla si es de solo lectura o de lectura/escritura.

Servidor local compartido:

Si el host tiene un servidor corriendo (por ejemplo, npm run dev en el puerto 3000), puede compartirlo:

Cmd+Shift+P → "Live Share: Share Server"

El invitado podrá acceder a localhost:3000 en su propio navegador, viendo la misma aplicación que el host. Muy útil para revisar UI en tiempo real.

Live Share Audio y Chat

La extensión Live Share Audio (instálala aparte) agrega una llamada de voz directamente dentro de VS Code, sin necesidad de Zoom o Discord. Útil para pair programming puro sin distracciones externas.

El chat básico está integrado en Live Share sin extensión adicional:

  • Aparece en el panel de Live Share en la barra lateral
  • Los mensajes son visibles para todos los participantes

Casos de uso prácticos

Code Review en tiempo real: En lugar de comentar en GitHub y esperar respuestas, el reviewer abre una sesión con el autor y recorre el código juntos. Las preguntas y respuestas son instantáneas.

Pair Programming remoto: El driver escribe código mientras el navigator observa y sugiere. Rotan roles fácilmente: el host simplemente le da los controles al invitado.

Debugging colaborativo: Cuando un bug es especialmente difícil, dos pares de ojos en el mismo código, con la misma sesión de debugging activa, son más efectivos que uno.

Onboarding de nuevos developers: El desarrollador senior comparte una sesión con el nuevo integrante del equipo. Le explica el código navegando por él en tiempo real, el nuevo puede hacer preguntas y editar a la vez.

Entrevistas técnicas: En lugar de pedir al candidato que comparta pantalla, el entrevistador abre una sesión Live Share. El candidato escribe código real en su entorno real, y el entrevistador lo ve y puede colaborar si lo necesita.

Live Share es una de esas herramientas que, una vez que la usas en una situación donde hace falta, no entiendes cómo trabajabas sin ella. La colaboración en tiempo real sin fricción cambia completamente la dinámica de los equipos remotos.