Inicio rápido para Codespaces

Introducción

En esta guía, crearás un codespace desde un repositorio de plantilla y explorarás algunas de las características esenciales disponibles para ti dentro del codespace.

Desde esta guía de inicio rápido, aprenderás cómo crear un codespace, cómo conectarte a un puerto reenviado para ver tu aplicación ejecutándose, cómo utilizar el control de versiones en un codespace y cómo personalizar tu configuración con extensiones.

Para obtener más información sobre cómo funcionan los Codespaces exactamente, consulta la guía compañera "Conoce los Codespaces a fondo".

Crea tu codespace

1. Navega al repositorio de plantilla y selecciona Utilizar esta plantilla.

2. Nombra a tu repositorio, selecciona tus ajustes de privacidad preferidos y haz clic en Crear repositorio desde esta plantilla.

3. Navega a la página principal del repositorio recientemente creado. Debajo del nombre de repositorio, utiliza el menú desplegable de Código y, en la pestaña de Codespaces, haz clic en Codespace nuevo.

   

Ejecutar la aplicación

Una vez que se cree tu codespace, tu repositorio se clonará automáticamente en él. Ahora puedes ejecutar la aplicación y lanzarla en un buscador.

1. Ya que este ejemplo utiliza un proyecto en Node.js, inicia la aplicación ingresando npm run dev en la terminal. Este comando ejecuta el script dev en el archivo package.json e inicia la aplicación web que se define en el repositorio de muestra.

   

   Si estás siguiendo la guía con un tipo de aplicación diferente, ingresa el comando de incio correspondiente para este.

2. Cuando tu aplicación inicie, el codespace reconocerá el puerto en el cual está ejecutándose y mostrará un mensaje para reenviar este puerto para que te puedas conectar a él.

   

3. Haz clic en Abrir en el buscador para ver tu aplicación que se está ejecutando en una pestaña nueva.

Editar la aplicación y ver los cambios

1. Regresa a tu codespace y abre el archivo haikus.json haciendo doble clic en el Explorador de Archivos.

2. Edita el campo text del primer haiku para personalizar la aplicación con tu propio haiku.

3. Regresa a la pestaña de la aplicación en ejecución dentro de tu buscador y actualiza para ver los cambios.

   Si cerraste la pestaña, abre el panel de Puertos y haz clic en el icono de Abrir en el buscador para el puerto en ejecución.

Confirmar y subir tus cambios

Ahora que hiciste algunos cambios, puedes utilizar la terminal integrada o la vista de código fuente para confirmar y subir los cambios al remoto.

1. En la barra de actividad, haz clic en la vista de Control de código fuente.
2. Para probar tus cambios, haz clic en + junto al archivo que cambiaste o junto a Cambios si cambiaste archivos múltiples y quieres probarlos todos.
3. Teclea un mensaje de confirmación que describa el cambio que hiciste.
4. Para confirmar tus cambios planeados, haz clic en la marca de verificación en la parte superior de la barra lateral del control de código fuente.
   Puedes subir los cambios que hiciste. Esto aplica a aquellos de la rama ascendente en el repositorio remoto. Puede que necesites hacer eso si aún no estás listo para crear una solicitud de cambios o si prefieres crearla en GitHub.
5. En la parte superior de la barra lateral, haz clic en los puntos suspensivos (...).
6. En el menú desplegable, haz clic en Subir.

Personalizar con una extensión

Dentro de un codespace, tienes acceso al Visual Studio Code Marketplace. Para este ejemplo, instalarás una extensión que altera el tema, pero puedes instalar cualquier extensión que sea útil para tu flujo de trabajo.

1. En la barra lateral, haz clic en el icono de extensiones.

2. En la barra de búsqueda, ingresa fairyfloss e instala la extensión de fairyfloss.

   

3. Selecciona el tema fairyfloss seleccionándolo de la lista.

   

4. Los cambios que hagas en la configuración de tu editor en el codespace actual, tales como el tema y las uniones de teclado, se sincronizarán automáticamente a través de la Syncronización de ajustes en cualquier otro codespace que abras y en cualquier instancia de Visual Studio Code que se firmen en tu cuenta de GitHub.

Siguientes pasos

Creaste, personalizaste y ejecutaste exitosamente tu primer aplicación dentro de un codespace, pero ¡hay mucho más que explorar! Aquí tienes algunos recursos útiles para que tomes tus siguientes pasos con Codespaces.

• Cónocelo a fondo: Esta guía de inicio rápido presenta algunas de las características de los Codespaces. La guía a fondo ve estas áreas desde un punto de vista técnico.
• Configurar tu proyecto para los Codespaces: Estas guías te proporcionan información sobre cómo configurar tu proyecto para utilizar los Codespaces con lenguajes específicos
• Configurar los Codespaces para tu proyecto: Esta guía te proporciona detalles para crear una configuración personalizada para los Codespaces para tu proyecto.

Leer más

• Habilitar los Codespaces para tu organizción
• Administrar la facturación para los Codespaces en tu organización