Skip to main content

Desarrollar en un codespace

Puedes trabajar en un codespace mediante el explorador, Visual Studio Code, un IDE de JetBrains o en un shell de comandos.

Nota: El uso de GitHub Codespaces con un IDE de JetBrains se encuentra actualmente en versión beta pública y está sujeto a cambios.

Acerca del desarrollo con GitHub Codespaces

Puedes desarrollar código en un codespace con la herramienta que prefieras:

  • Un shell de comandos, a través de una conexión SSH iniciada mediante GitHub CLI.
  • Uno de los IDE de JetBrains, a través de la puerta de enlace de JetBrains.
  • Aplicación de escritorio Visual Studio Code.
  • Una versión basada en explorador de Visual Studio Code.

Las pestañas de este artículo te permiten cambiar de información para cada una de estas formas de trabajo. Actualmente estás en la pestaña de la versión del explorador web de Visual Studio Code.

Trabajo en un codespace en el explorador

El uso de Codespaces en el explorador proporciona una experiencia de desarrollo completa. Puedes editar código, depurar, usar comandos de Git y ejecutar la aplicación.

Captura de pantalla anotada de un codespace en el explorador

  1. Barra lateral: de manera predeterminada, en esta área se muestran los archivos del proyecto en Explorer.
  2. Barra de actividades: muestra las vistas y proporciona una manera de cambiar entre ellas. Puedes volver a ordenar las vistas si las arrastras y las sueltas.
  3. Editor: aquí es donde se editan los archivos. Puedes hacer clic con el botón derecho en la pestaña de un archivo para acceder a opciones como la de buscar el archivo en Explorer.
  4. Paneles: aquí es donde puedes ver la información de salida y depuración, así como el lugar predeterminado para el terminal integrado.
  5. Barra de estado: esta área te proporciona información útil sobre el codespace y el proyecto. Por ejemplo, el nombre de rama, los puertos configurados y más. Para una mejor experiencia con GitHub Codespaces, te recomendamos utilizar un explorador basado en Chromium, como Google Chrome o Microsoft Edge. Para obtener más información, consulta "Solución de problemas de clientes de GitHub Codespaces".

Personalización de los codespaces para un repositorio

Puedes personalizar los codespaces creados para un repositorio creando o actualizando la configuración del contenedor de desarrollo para el repositorio. Puedes hacerlo desde un codespace. Después de cambiar una configuración de contenedor de desarrollo, puedes aplicar los cambios en el codespace actual si recompilas el contenedor de Docker para el codespace. Para obtener más información, consulte "Introducción a los contenedores de desarrollo".

Personalizar tu codespace

Puedes usar un repositorio dotfiles y Sincronización de ajustes para personalizar aspectos del entorno de codespace para cualquier codespace que crees. La personalización puede incluir preferencias de shell y herramientas adicionales. Para más información, vea "Personalización de Codespaces para la cuenta".

Ejecutar tu app desde un codespace

Puedes reenviar los puertos en tu codespace para probar y depurar tu aplicación. También puedes administrar el protocolo de puerto y compartirlo dentro de tu organización o públicamente. Para obtener más información, consulte "Reenvío de puertos en su codespace".

Configramr tus cambios

Una vez que hayas hecho cambios a tu codespace, ya sea de código nuevo o de cambios de configuración, necesitarás confirmar tus cambios. El confirmar los cambios en tu repositorio garantiza que cualquiera que cree un codespace desde este repositorio tendrá la misma configuración. Esto también significa que cualquier personalización que hagas, tal como agregar extensiones de VS Code, aparecerá para todos los usuarios.

Para obtener información, vea "Uso del control de código fuente en codespace".

Utilizar la Visual Studio Code Command Palette

La Visual Studio Code Command Palette te permite acceder y administrar muchas de las características para Codespaces y Visual Studio Code. Para obtener más información, consulte "Uso de Visual Studio Code Command Palette en Codespaces". ## Navegar a un codespace existente

  1. Puede ver todos los codespaces disponibles que ha creado en github.com/codespaces.

  2. Da clic en el nombre del codespace en el cual quieras desarrollar.

    Nombre del codespace

También puedes ver cualquiera de tus codespaces en un repositorio específico si navegas hasta ese repositorio y seleccionas Código. El menú desplegable mostrará todos los codespaces activos en un repositorio.

Las pestañas de este artículo te permiten cambiar de información para cada una de estas formas de trabajo. Actualmente estás en la pestaña de Visual Studio Code.

Trabajo en un codespace en VS Code

GitHub Codespaces te proporciona la experiencia completa de desarrollo de Visual Studio Code. Puedes editar código, depurar y utilizar comandos de Git mientras desarrollas en un codespace con VS Code. Para más información, consulta la documentación de VS Code.

Captura de pantalla anotada de un codespace en VS Code

  1. Barra lateral: de manera predeterminada, en esta área se muestran los archivos del proyecto en Explorer.
  2. Barra de actividades: muestra las vistas y proporciona una manera de cambiar entre ellas. Puedes volver a ordenar las vistas si las arrastras y las sueltas.
  3. Editor: aquí es donde se editan los archivos. Puedes hacer clic con el botón derecho en la pestaña de un archivo para acceder a opciones como la de buscar el archivo en Explorer.
  4. Paneles: aquí es donde puedes ver la información de salida y depuración, así como el lugar predeterminado para el terminal integrado.
  5. Barra de estado: esta área te proporciona información útil sobre el codespace y el proyecto. Por ejemplo, el nombre de rama, los puertos configurados y más.

Para obtener más información sobre el uso de VS Code, consulta la guía de la interfaz de usuario en la documentación de VS Code.

Puedes conectarte a tu codespace directamente desde VS Code. Para obtener más información, consulta "Uso de Codespaces en VS Code."

Para obtener información de solución de problemas, consulta "Solución de problemas de clientes de codespaces".

Personalización de los codespaces para un repositorio

Puedes personalizar los codespaces creados para un repositorio creando o actualizando la configuración del contenedor de desarrollo para el repositorio. Puedes hacerlo desde un codespace. Después de cambiar una configuración de contenedor de desarrollo, puedes aplicar los cambios en el codespace actual si recompilas el contenedor de Docker para el codespace. Para obtener más información, consulte "Introducción a los contenedores de desarrollo".

Personalizar tu codespace

Puedes usar un repositorio dotfiles y Sincronización de ajustes para personalizar aspectos del entorno de codespace para cualquier codespace que crees. La personalización puede incluir preferencias de shell y herramientas adicionales. Para más información, vea "Personalización de Codespaces para la cuenta".

Ejecutar tu app desde un codespace

Puedes reenviar los puertos en tu codespace para probar y depurar tu aplicación. También puedes administrar el protocolo de puerto y compartirlo dentro de tu organización o públicamente. Para obtener más información, consulte "Reenvío de puertos en su codespace".

Configramr tus cambios

Una vez que hayas hecho cambios a tu codespace, ya sea de código nuevo o de cambios de configuración, necesitarás confirmar tus cambios. El confirmar los cambios en tu repositorio garantiza que cualquiera que cree un codespace desde este repositorio tendrá la misma configuración. Esto también significa que cualquier personalización que hagas, tal como agregar extensiones de VS Code, aparecerá para todos los usuarios.

Para obtener información, vea "Uso del control de código fuente en codespace".

Utilizar la Visual Studio Code Command Palette

La Visual Studio Code Command Palette te permite acceder y administrar muchas de las características para Codespaces y Visual Studio Code. Para obtener más información, consulte "Uso de Visual Studio Code Command Palette en Codespaces". ## Navegar a un codespace existente

  1. Puede ver todos los codespaces disponibles que ha creado en github.com/codespaces.

  2. Da clic en el nombre del codespace en el cual quieras desarrollar.

    Nombre del codespace

También puedes ver cualquiera de tus codespaces en un repositorio específico si navegas hasta ese repositorio y seleccionas Código. El menú desplegable mostrará todos los codespaces activos en un repositorio.

Las pestañas de este artículo te permiten cambiar de información para cada una de estas formas de trabajo. Actualmente estás en la pestaña de los IDE de JetBrains.

Trabajo en un codespace en un IDE de JetBrains

Para usar GitHub Codespaces con un IDE de JetBrains, debes tener ya instalada la puerta de enlace de JetBrains. Para obtener información sobre cómo instalar JetBrains Gateway, consulta el sitio web de JetBrains.

Puedes trabajar en un codespace mediante el IDE de JetBrains que prefieras. Después de crear un codespace, puedes usar la aplicación puerta de enlace de JetBrains para abrir el codespace en el IDE que prefieras.

Puedes editar código, depurar y usar comandos de Git mientras desarrollas en un codespace con la IDE de JetBrains. Para obtener más información sobre los distintos IDE de JetBrains, consulta la documentación de JetBrains.

Interfaz de usuario de IntelliJ IDEA

En la documentación de GitHub Codespaces, usamos IntelliJ IDEA como un IDE de JetBrains representativo. Los diferentes IDE de JetBrains pueden tener diseños diferentes.

Captura de pantalla anotada de un codespace en JetBrains IntelliJ IDEA

  1. Barra de navegación: muestra la ruta de acceso al archivo o directorio seleccionado actualmente. Usa los botones situados a la derecha de la barra de navegación para realizar diversas acciones, como compilar, ejecutar o depurar el proyecto, o ejecutar comandos de Git para confirmar e insertar los cambios.
  2. Ventana de herramientas del proyecto: muestra la estructura del proyecto y permite abrir archivos en el editor.
  3. Ventana de herramientas de GitHub Codespaces : se muestra al hacer clic en el complemento de GitHub Codespaces de la barra a la izquierda de la ventana de herramientas. Muestra información sobre el codespace, incluido su nombre para mostrar y el tipo de equipo. Los botones de la parte superior de esta ventana de herramientas permiten:
    • Detener el codespace y desconectarse
    • Mostrar la página web "Tus codespaces"
    • Ver los registros de creación de codespaces
    • Recompilar el contenedor de desarrollo
  4. Editor: aquí es donde editas tus archivos. Puedes hacer clic con el botón derecho en la pestaña de un archivo para acceder a opciones como mover la pestaña a una nueva ventana.
  5. Terminal: se muestra al hacer clic en Terminal en la barra de la ventana de herramientas de la parte inferior de la ventana principal (encima de la barra de estado). El terminal integrado permite realizar tareas de línea de comandos sin tener que cambiar a una aplicación de terminal dedicada.
  6. Barra de estado: mantén el puntero sobre el icono situado a la izquierda de la barra de estado para ver una lista de herramientas. Haz clic en el icono para ocultar o mostrar las barras de la ventana de herramientas. En el lado derecho de la barra de estado se muestra información sobre el proyecto, incluida la rama de Git actual.

Para obtener más información sobre la interfaz de usuario de IntelliJ IDEA, consulta la documentación de JetBrains para IntelliJ IDEA.

Personalización de los codespaces para un repositorio

Puedes personalizar los codespaces creados para un repositorio mediante la creación o actualización de la configuración del contenedor de desarrollo para el repositorio. Puedes hacerlo desde un codespace. Después de cambiar una configuración de contenedor de desarrollo, puedes aplicar los cambios en el codespace actual si recompilas el contenedor de Docker para el codespace. Para obtener más información, consulte "Introducción a los contenedores de desarrollo".

Personalizar tu codespace

Puedes usar un repositorio dotfiles para personalizar aspectos del entorno de codespace para cualquier codespace que crees. Para más información, consulta "Personalización de GitHub Codespaces para la cuenta".

Configramr tus cambios

Después de hacer cambios en el codespace, ya sea introducir código nuevo o cambiar la configuración, tendrás que confirmar y enviar los cambios. Enviar los cambios al repositorio garantiza que cualquiera que cree un codespace desde este repositorio tendrá la misma configuración. Esto también significa que cualquier personalización que hagas para modificar la configuración de los codespaces creados para un repositorio estará disponible para todos los usuarios que usen el repositorio.

Para más información, vea "Uso del control de código fuente en el codespace".

Información adicional

Las pestañas de este artículo te permiten cambiar de información para cada una de estas formas de trabajo. Actualmente estás en la pestaña de GitHub CLI.

Trabajo en un codespace en un shell de comandos

Para obtener más información sobre GitHub CLI, vea "Acerca de GitHub CLI".

Puedes usar GitHub CLI para crear un codespace o iniciar uno existente y, luego, conectarte mediante SSH a él. Una vez que te hayas conectado, puedes trabajar en la línea de comandos con tus herramientas de línea de comandos preferidas.

Después de instalar la GitHub CLI y autenticarte con tu cuenta de GitHub, puedes usar el comando gh codespace [<SUBCOMMAND>...] --help para examinar la información de ayuda. Como alternativa, puedes ver la misma información de referencia en https://cli.github.com/manual/gh_codespace.

Para obtener más información, consulta "Uso de GitHub Codespaces con la CLI de GitHub".