Notas:
- El uso de GitHub Codespaces con un IDE de JetBrains se encuentra actualmente en versión preliminar pública y está sujeto a cambios.
- Para trabajar en un codespace en un IDE de JetBrains, debe usar la versión 2023.3.* o 2024.1.* de JetBrains Gateway.
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.
Los componentes principales de la interfaz de usuario son:
- Barra lateral: de forma predeterminada, esta área te muestra los archivos de tu proyecto en el explorador.
- 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.
- 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.
- Paneles: aquí es donde puedes ver la información de salida y depuración, así como el lugar predeterminado para el terminal integrado.
- 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 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, vea «Introducción a los contenedores dev».
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 obtener más información, vea «Personalización de GitHub 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 más información, consulta "Reenviar puertos en tu 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. La confirmación de los cambios de configuración en tu repositorio garantiza que cualquiera que cree un codespace desde este repositorio tendrá la misma configuración. Cualquier personalización que realices, como agregar extensiones de VS Code, estará disponible para todos los usuarios.
En este tutorial, has creado un codespace a partir de un repositorio de plantillas, por lo que el código del codespace aún no se almacena en un repositorio. Puede crear un repositorio publicando la rama actual en el GitHub.
Para más información, consulta "Utilizar el control de código fuente en tu 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, vea «Uso de la paleta de Comandos de Visual Studio Code en GitHub Codespaces».
Navegar a un codespace existente
-
Puedes ver todos los codespaces disponibles que has creado en la página “Tus codespaces”. Para mostrar esta página, en la esquina superior izquierda de GitHub, seleccione y haga clic en Codespaces . Esto te lleva a github.com/codespaces.
-
Da clic en el nombre del codespace en el cual quieras desarrollar.
Como alternativa, puedes ver cualquiera de los codespaces de un repositorio específico; para ello, ve a ese repositorio, haz clic en el botón ** Código ** y selecciona la pestaña Codespaces. El menú desplegable mostrará todos los codespaces activos para el 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.
Los componentes principales de la interfaz de usuario son:
- Barra lateral: de forma predeterminada, esta área te muestra los archivos de tu proyecto en el explorador.
- 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.
- 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.
- Paneles: aquí es donde puedes ver la información de salida y depuración, así como el lugar predeterminado para el terminal integrado.
- 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, vea «Uso de GitHub Codespaces en Visual Studio Code».
Para consultar información sobre solución de problemas, vea "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, vea «Introducción a los contenedores dev».
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 obtener más información, vea «Personalización de GitHub 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 más información, consulta "Reenviar puertos en tu 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. La confirmación de los cambios de configuración en tu repositorio garantiza que cualquiera que cree un codespace desde este repositorio tendrá la misma configuración. Cualquier personalización que realices, como agregar extensiones de VS Code, estará disponible para todos los usuarios.
En este tutorial, has creado un codespace a partir de un repositorio de plantillas, por lo que el código del codespace aún no se almacena en un repositorio. Puede crear un repositorio publicando la rama actual en el GitHub.
Para más información, consulta "Utilizar el control de código fuente en tu 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, vea «Uso de la paleta de Comandos de Visual Studio Code en GitHub Codespaces».
Navegar a un codespace existente
-
Puedes ver todos los codespaces disponibles que has creado en la página “Tus codespaces”. Para mostrar esta página, en la esquina superior izquierda de GitHub, seleccione y haga clic en Codespaces . Esto te lleva a github.com/codespaces.
-
Da clic en el nombre del codespace en el cual quieras desarrollar.
Como alternativa, puedes ver cualquiera de los codespaces de un repositorio específico; para ello, ve a ese repositorio, haz clic en el botón ** Código ** y selecciona la pestaña Codespaces. El menú desplegable mostrará todos los codespaces activos para el 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.
Los componentes principales de la interfaz de usuario son:
- 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.
- Ventana de herramientas del proyecto: muestra la estructura del proyecto y permite abrir archivos en el editor.
- 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:
- Actualizar los detalles de la ventana de herramientas del espacio de código activo
- Mostrar la página web "Tus codespaces"
- Ver los registros de creación de codespaces
- 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.
- 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.
- 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 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, vea «Introducción a los contenedores dev».
Personalizar tu codespace
Puedes usar un repositorio dotfiles para personalizar aspectos del entorno de codespace para cualquier codespace que crees. Para obtener más información, vea «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 obtener más información, vea «Utilizar el control de código fuente en tu 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 más información sobre GitHub CLI, consulta "Acerca del CLI de GitHub".
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, vea «Uso de GitHub Codespaces con la CLI de GitHub».