Skip to main content

Uso de GitHub Codespaces en Visual Studio Code

Puedes realizar tareas de desarrollo en tu codespace directamente en Visual Studio Code conectando la extensión GitHub Codespaces con tu cuenta de GitHub.

Acerca de GitHub Codespaces en Visual Studio Code

Puedes utilizar tu instalación local de Visual Studio Code para crear, administrar, trabajar en y borrar codespaces. Para usar GitHub Codespaces en VS Code, debes instalar la extensión Codespaces. Para obtener más información sobre la configuración de GitHub Codespaces en VS Code, consulta "Requisitos previos".

Predeterminadamente, si creas un codespace nuevo en GitHub.com, este se abrirá en el buscador. Si prefieres que cualquier codespace nuevo se abra en VS Code automáticamente, puedes configurar que VS Code sea tu editor predeterminado. Para más información, consulta "Configuración del editor predeterminado para GitHub Codespaces".

Si prefieres trabajar en el explorador, pero quieres seguir usando las extensiones, los temas y los accesos directos existentes de VS Code, puedes activar la sincronización de la configuración. Para más información, consulta "Personalización de GitHub Codespaces para la cuenta".

Requisitos previos

Para hacer desarrollos en un codespace directamente desde VS Code, debes instalar e iniciar sesión en la extensión de GitHub Codespaces con tus credenciales de GitHub. La extensión de GitHub Codespaces requiere el lanzamiento 1.51 de octubre de 2020 de VS Code o superior.

UsaVisual Studio Code Marketplace para instalar la extensión GitHub Codespaces. Para obtener más información, consulta Marketplace de extensiones en la documentación de VS Code.

  1. En VS Code, en la barra lateral izquierda, haz clic en el icono de Explorador Remoto.

    El icono de Remote Explorer (Explorador remoto) en Visual Studio Code

    Nota: Si el Explorador remoto no se muestra en la barra de actividad:

    1. Abra la paleta de comandos. Por ejemplo, presionando el Comando+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Escriba: codespaces.
    3. Haz clic en Codespaces: Detalles.
  2. Haz clic en Iniciar sesión en GitHub... .

    Inicio de sesión en GitHub Codespaces

  3. A fin de autorizar a VS Code para acceder a la cuenta en GitHub, haz clic en Permitir.

  4. Regístrate en GitHub para aprobar la extensión.

  1. En VS Code, en la barra lateral izquierda, haz clic en el icono de Explorador Remoto.

    El icono de Remote Explorer (Explorador remoto) en Visual Studio Code

    Nota: Si el Explorador remoto no se muestra en la barra de actividad:

    1. Abra la paleta de comandos. Por ejemplo, presionando el Comando+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Escriba: codespaces.
    3. Haz clic en Codespaces: Detalles.
  2. Use el menú desplegable "EXPLORADOR REMOTO" y, después, haga clic en GitHub Codespaces .

    El encabezado de GitHub Codespaces

  3. Haz clic en Iniciar sesión para ver Codespaces .

    Registrarse para ver GitHub Codespaces

  4. A fin de autorizar a VS Code para acceder a la cuenta en GitHub, haz clic en Permitir.

  5. Regístrate en GitHub para aprobar la extensión.

Creación de un codespace en VS Code

Después de conectar tu cuenta de GitHub.com a la extensión de GitHub Codespaces, puedes crear un codespace. Para obtener más información sobre la extensión de GitHub Codespaces, consulta el VS Code Marketplace.

  1. En VS Code, en la barra lateral izquierda, haz clic en el icono de Explorador Remoto.

    El icono de Remote Explorer (Explorador remoto) en Visual Studio Code

    Nota: Si el Explorador remoto no se muestra en la barra de actividad:

    1. Abra la paleta de comandos. Por ejemplo, presionando el Comando+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Escriba: codespaces.
    3. Haz clic en Codespaces: Detalles.
  2. Haz clic el icono de Agregar: .

    Opción para crear un codespace en GitHub Codespaces

  3. Escribe el nombre del repositorio en el que quieres desarrollar y selecciónalo.

    Búsqueda de un repositorio para crear un codespace

    Si el repositorio que eliges es propiedad de una organización y esta ha configurado los codespaces de este repositorio de modo que se facturen a la organización o a su empresa principal, en los mensajes posteriores se indicará quién paga el codespace.

  4. Da clic en la rama en la que quieras desarrollar.

    Búsqueda de una rama para crear un codespace

  5. Si se te pide que elijas un archivo de configuración de contenedor de desarrollo, selecciona un archivo en la lista.

    Selección del archivo de configuración de un contenedor de desarrollo para GitHub Codespaces

  6. Elige el tipo de máquina que quieres utilizar.

    Tipos de instancia para un nuevo codespace

    Nota: La elección de los tipos de máquina disponibles puede estar limitada por varios factores. Estos pueden incluir una directiva configurada para la organización o una especificación mínima del tipo de máquina para el repositorio. Para más información, vea "Restricción del acceso a los tipos de máquina" y "Configuración de una especificación mínima para las máquinas de los codespaces".

Apertura de un codespace en VS Code

  1. En VS Code, en la barra lateral izquierda, haz clic en el icono de Explorador Remoto.

    El icono de Remote Explorer (Explorador remoto) en Visual Studio Code

    Nota: Si el Explorador remoto no se muestra en la barra de actividad:

    1. Abra la paleta de comandos. Por ejemplo, presionando el Comando+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Escriba: codespaces.
    3. Haz clic en Codespaces: Detalles.
  2. Debajo de "Codespaces", da clic en el codespace en el que quieras desarrollar.

  3. Da clic en en el icono de conexión al codespace.

    Icono de conectarse al codespace en VS Code

Cambio del tipo de máquina en VS Code

Normalmente, puedes ejecutar tu codespace en los tipos de máquina remota de tu elección. Estos tipos de máquina ofrecen una selección de especificaciones de hardware que van desde 2 núcleos a 32 núcleos, aunque es posible que la gama completa de tipos de máquina no siempre esté disponible. Cada uno de los tipos de máquina tiene un nivel de recursos y de facturación diferente. Para obtener información, consulta "Acerca de la facturación de GitHub Codespaces".

De forma predeterminada, al crear un codespace se utiliza el tipo de máquina con los recursos válidos más bajos. Puedes cambiar el tipo de máquina del codespace en cualquier momento.

Nota: La elección de los tipos de máquina disponibles puede estar limitada por varios factores. Estos pueden incluir una directiva configurada para la organización o una especificación mínima del tipo de máquina para el repositorio. Para más información, vea "Restricción del acceso a los tipos de máquina" y "Configuración de una especificación mínima para las máquinas de los codespaces".

  1. En VS Code, abre la paleta de comandos con Comando+Mayús+P (Mac) o Ctrl+Mayús+P (Windows/Linux).

  2. Busca y selecciona "Codespaces: Cambiar mi tipo de máquina".

    Buscar una rama para crear un Codespaces nuevo

  3. Si no sigues estas instrucciones en un codespace, haz clic en el codespace que quieres cambiar.

    Buscar una rama para crear un Codespaces nuevo

    Si sigues estas instrucciones en un codespace, el cambio se aplicará al codespace en el que estás trabajando.

  4. Selecciona el tipo de máquina que quieres utilizar.

  5. Si vas a cambiar a un tipo de máquina con una capacidad de almacenamiento diferente, aparecerá un mensaje que preguntará si quieres continuar. Lee la pregunta y haz clic en para aceptar.

Si has cambiado a una máquina virtual con una capacidad de almacenamiento diferente (por ejemplo, de 64 GB a 32 GB), el codespace no estará disponible durante un breve periodo de tiempo mientras cambias el tipo de máquina. Si el codespace está actualmente activo, se detendrá automáticamente. Una vez completado el cambio, podrás reiniciar el codespace que se ejecuta en el nuevo tipo de máquina.

Si has cambiado a una máquina virtual con la misma capacidad de almacenamiento, el cambio se aplicará la próxima vez que reinicies el codespace. Un codespace activo no se detendrá automáticamente. Para obtener más información sobre cómo reiniciar un codespace, consulta "Detención e inicio de un codespace".

Eliminación de un codespace en VS Code

Puedes eliminar codespaces desde VS Code cuando no estás trabajando actualmente en un codespace.

  1. En VS Code, en la barra lateral izquierda, haz clic en el icono de Explorador Remoto.

    El icono de Remote Explorer (Explorador remoto) en Visual Studio Code

    Nota: Si el Explorador remoto no se muestra en la barra de actividad:

    1. Abra la paleta de comandos. Por ejemplo, presionando el Comando+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Escriba: codespaces.
    3. Haz clic en Codespaces: Detalles.
  2. En "CODESPACES DE GITHUB", haz clic con el botón derecho en el codespace que quieras eliminar.

  3. Haz clic en Eliminar codespace.

    Borrar un codespace en GitHub

Cambio a la compilación para usuarios expertos de VS Code

Puedes usar la versión para expertos de VS Code en GitHub Codespaces.

  1. En la esquina inferior izquierda de la ventana GitHub Codespaces, selecciona Configuración de .

  2. Desde la lista, selecciona "Cambiar a la versión para expertos".

    Clic en "Versión para expertos" en GitHub Codespaces

  3. Una vez seleccionado, GitHub Codespaces seguirá abriéndose en la Versión para Expertos.

Información adicional