Tema 11 · Remote & Workspaces

11. Espacios de Trabajo Multi-Root (.code-workspace), Remote SSH y Live Share

Agrupa múltiples repositorios en una sola ventana, edita archivos directamente en servidores Linux remotos por SSH y colabora en tiempo real.

10. Depuración Profesional (Debugging): Breakpoints, Watch, Call Stack y launch.json 12. Instalación, Activación y Configuración de GitHub Copilot en VS Code

Más Allá de una Sola Carpeta: Multi-Root Workspaces

Cuando trabajas en una arquitectura moderna donde el Frontend (React/Vue) está en una carpeta y la API Backend (PHP/Node) está en otra carpeta separada, no necesitas tener dos ventanas de VS Code abiertas consumiendo el doble de memoria. Puedes unirlas usando un Espacio de Trabajo Multi-Raíz (.code-workspace) desde el menú File ➔ Add Folder to Workspace... y luego Save Workspace As...

Desarrollo Remoto (Remote - SSH) y Programación en Pareja (Live Share)

Herramienta Oficial ID de Extensión ¿Cómo Transforma tu Flujo de Trabajo?
Remote - SSH ms-vscode-remote.remote-ssh Te conecta por SSH a un servidor Linux VPS o instancia de nube y abre las carpetas del servidor como si estuvieran en tu disco local, con terminal e IntelliSense remoto.
WSL (Windows Subsystem for Linux) ms-vscode-remote.remote-wsl Permite editar desde la interfaz gráfica de Windows proyectos alojados dentro del sistema de archivos nativo de Ubuntu en WSL2.
Live Share MS-vsliveshare.vsliveshare Genera un enlace seguro para que un compañero o profesor entre a tu editor en tiempo real, vea tu cursor, edite código contigo y comparta tu terminal y localhost.

⚡ Estructura de un Archivo .code-workspace Multi-Proyecto

Une tu carpeta de Backend, tu carpeta de Frontend y la documentación en un solo espacio con configuraciones compartidas.

proyecto-fullstack.code-workspace
Solo lectura 
{
  // Guarda este archivo como "proyecto-fullstack.code-workspace" y ábrelo con doble clic
  "folders": [
    {
      "name": "⚙️ Backend API (PHP 8.3)",
      "path": "./backend-api"
    },
    {
      "name": "🎨 Frontend Web (JS / CSS)",
      "path": "./frontend-app"
    },
    {
      "name": "📚 Documentación & SQL",
      "path": "./docs-db"
    }
  ],
  "settings": {
    "files.exclude": {
      "**/.git": true,
      "**/node_modules": true,
      "**/vendor": true
    },
    "window.title": "${rootName} — Plataforma Full-Stack"
  },
  "extensions": {
    "recommendations": [
      "GitHub.copilot",
      "bmewburn.vscode-intelephense-client",
      "esbenp.prettier-vscode"
    ]
  }
}
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Qué permite hacer la extensión oficial "Live Share" de Microsoft en Visual Studio Code?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Visual Studio Code & GitHub Copilot Profesional y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.