Skip to main content

Uso de GitHub Codespaces en Visual Studio Code

Puede desarrollar en su espacio de código directamente en Visual Studio Code conectando la extensión GitHub Codespaces con su cuenta GitHub.

Acerca de GitHub Codespaces en Visual Studio Code

Puede usar su instalación local de Visual Studio Code para crear, administrar, trabajar en y eliminar espacios de código. Para usar GitHub Codespaces en VS Code, debes instalar la extensión Codespaces. Para obtener más información sobre cómo configurar GitHub Codespaces en VS Code, vea Requisitos previos.

De forma predeterminada, si crea un nuevo espacio de código en GitHub, se abrirá en el explorador. Si prefiere abrir los nuevos espacios de código en VS Code automáticamente, puede establecer que el editor predeterminado sea VS Code. Para más información, consulta Configuración del editor predeterminado para GitHub Codespaces.

Si prefiere trabajar en el explorador, pero desea seguir usando las extensiones, temas y accesos directos existentes VS Code , puede activar la sincronización de configuración. Para obtener más información, consulte Personalización de GitHub Codespaces para su cuenta.

Requisitos previos

Para desarrollar en un espacio de código directamente en VS Code, debe instalar e iniciar sesión en la extensión GitHub Codespaces con tus credenciales de GitHub. La GitHub Codespaces extensión requiere VS Code octubre de 2020, versión 1.51 o posterior.

Use el Visual Studio Code Marketplace para instalar la extensión GitHub Codespaces. Para obtener más información, consulte Extension Marketplace en la VS Code documentación.

  1. En VS Code, en la barra de actividad, haz clic en el icono de Explorador remoto.

    Captura de pantalla de la barra Actividades. El icono de la barra lateral "Explorador remoto" (un rectángulo superpuesto por un círculo) está resaltado con un contorno naranja.

    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: details.
    3. Haz clic en Codespaces: Detalles.
  2. Seleccione "GitHub Codespaces" en la lista desplegable de la parte superior de la barra lateral "Explorador remoto", si aún no está seleccionada.

  3. Haga clic en Iniciar sesión en GitHub.

    Captura de pantalla de la barra lateral "Explorador remoto" para "GitHub Codespaces" donde aparece el botón "Iniciar sesión en GitHub".

  4. Si no ha iniciado sesión actualmente en GitHub , se le pedirá que lo haga. Continúe e inicie sesión.

  5. Cuando se le pida que especifique lo que desea autorizar, haga clic en el botón Autorizar para "GitHub".

  6. Si se muestra la página de autorización, haz clic en Autorizar Visual-Studio-Code.

Conexión a una empresa en GHE.com

Si accede a través de GitHub de un subdominio de GHE.com, debe configurar las Github-enterprise: Uri y Github > Codespaces: Auth Provider en VS Code para poder conectarse a sus espacios de código.

  1. Para abrir la VS Code configuración, presione Comando+, (Mac) o Ctrl+(Windows).

  2. En la barra de búsqueda, busque enterprise.

  3. Para la Github-enterprise: Uri configuración, escriba la dirección URL a la que tiene acceso GitHub. Por ejemplo: https://octocorp.ghe.com.

    Como alternativa, puede agregar lo siguiente al settings.json archivo:

    JSON
    "github-enterprise.uri": "https://SUBDOMAIN.ghe.com"
    
  4. En la VS Code configuración, busque Codespaces Auth Provider.

  5. Para la Github > Codespaces: Auth Provider configuración, seleccione github-enterprise en la lista desplegable.

    Como alternativa, puede agregar lo siguiente al settings.json archivo:

    JSON
    "github.codespaces.authProvider": "github-enterprise"
    
  6. Se le mostrará un mensaje que le pedirá que inicie sesión. Haga clic en Iniciar sesión en GitHub y, a continuación, siga las indicaciones para autorizar su cuenta.

    Si no ve el mensaje emergente, intente reiniciar VS Code.

Si alguna vez necesita regresar a una cuenta en GitHub.com, establezca la configuración de Github > Codespaces: Auth Provider en su valor predeterminado y elimine la configuración de Github-enterprise: Uri.

Creación de un espacio de código en VS Code

Después de que conecte su cuenta de GitHub a la extensión de GitHub Codespaces, puede crear un codespace nuevo. 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 de actividad, haz clic en el icono de Explorador remoto.

    Captura de pantalla de la barra Actividades. El icono de la barra lateral "Explorador remoto" (un rectángulo superpuesto por un círculo) está resaltado con un contorno naranja.

    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: details.
    3. Haz clic en Codespaces: Detalles.
  2. Mantén el puntero sobre la barra lateral "Explorador remoto" y haz clic en .

    Captura de pantalla de la barra lateral "Explorador remoto" para GitHub Codespaces. La información sobre herramientas "Crear nuevo codespace" aparece junto al botón de signo más.

  3. En el cuadro de texto, escribe el nombre del repositorio en el que quieres desarrollar y selecciónalo.

    Captura de pantalla de "octo-org/he" escrito en el cuadro de texto y una lista de cuatro repositorios que comienzan con esta cadena.

    Se muestra un mensaje en el lado derecho de las solicitudes posteriores que te indican quién pagará por el codespace.

    Captura de pantalla de un mensaje para una rama, con el mensaje "Uso pagado por hubwriter".

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

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

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

    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, consulta Restringir el acceso a los tipos de máquina y Establecer una especificación mínima para máquinas de codespace.

Apertura de un espacio de código en VS Code

  1. En VS Code, en la barra de actividad, haz clic en el icono de Explorador remoto.

    Captura de pantalla de la barra Actividades. El icono de la barra lateral "Explorador remoto" (un rectángulo superpuesto por un círculo) está resaltado con un contorno naranja.

    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: details.
    3. Haz clic en Codespaces: Detalles.
  2. En "GitHub Codespaces", mantenga el puntero sobre el espacio de código en el que desea desarrollar.

  3. Haz clic en el icono de conexión (un símbolo de enchufe).

    Captura de pantalla de la barra lateral "Explorador remoto". El icono de conexión de un codespace (símbolo de enchufe) está resaltado con un contorno naranja oscuro.

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 más información, consulta [AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-github-codespaces).
          
          De forma predeterminada, al crear un codespace se utiliza el tipo de máquina con los recursos válidos más bajos. Puede cambiar el tipo de máquina del espacio de código 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, consulta Restringir el acceso a los tipos de máquina y Establecer una especificación mínima para máquinas de codespace.

  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".

    Captura de pantalla de "cambiar máquina" especificada como una cadena de búsqueda y "Codespaces: cambiar tipo de máquina" en la lista desplegable.

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

    Captura de pantalla de una lista desplegable de cuatro codespaces.

    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 ha cambiado a una máquina virtual con una capacidad de almacenamiento diferente (por ejemplo, de 32 GB a 64 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 más información sobre cómo reiniciar un codespace, consulta Detención e inicio de un codespace.

Eliminación de un espacio de código 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 de actividad, haz clic en el icono de Explorador remoto.

    Captura de pantalla de la barra Actividades. El icono de la barra lateral "Explorador remoto" (un rectángulo superpuesto por un círculo) está resaltado con un contorno naranja.

    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: details.
    3. Haz clic en Codespaces: Detalles.
  2. En "GitHub Codespaces", haz clic con el botón derecho en el codespace que deseas eliminar.

  3. Haz clic en Eliminar codespace.

Cambio a VS Code Insiders en cliente web

Si usa el VS Code cliente web, puede cambiar a la versión insider de la aplicación. Para obtener más información sobre esta versión de VS Code, consulte Introducción a la compilación de Insiders en el VS Code blog.

Después de cambiar de versión en un codespace, el cliente web seguirá usando la versión Insiders si detienes y reinicias el codespace. Los nuevos espacios de código que cree y abra en el VS Code cliente web también usarán la versión de Insiders.

  1. En la parte inferior izquierda de la ventana del explorador que muestra un espacio de código, haga clic en .

  2. En el menú, selecciona "Cambiar a la versión Insiders".

    Captura de pantalla del cliente web de VS Code. Un icono de engranaje está resaltado con un contorno naranja. "Cambiar a la versión Insiders" se muestra en el menú.

  3. Haz clic en Volver a cargar.

Para volver a la versión estable de VS Code, repita el proceso, pero elija Cambiar a Versión estable. Después de volver a cambiar, el codespace seguirá usando la versión estable si detienes y reinicias el codespace. Los nuevos espacios de código que cree y abra en el VS Code cliente web también usarán la versión estable.

Uso de la aplicación de escritorio Insiders para Codespaces

Para usar GitHub Codespaces en la versión insider de la VS Code aplicación de escritorio, inicie o cree los espacios de código desde la VS Code aplicación Insiders. Para obtener más información, consulte Creación de un espacio de código en VS Code y Apertura de un espacio de código en VS Code anteriormente en este artículo.

Información adicional

  •         [AUTOTITLE](/codespaces/reference/using-the-vs-code-command-palette-in-codespaces)
    
  •         [AUTOTITLE](/codespaces/reference/using-github-copilot-in-github-codespaces)