Configurar Codespaces para tu proyecto

Acerca de los contenedores dev

Un contenedor de desarrollo o contenedor dev es el ambiente que utilizan los Codespaces para proporcionar las herramientas y tiempos de ejecución que necesita tu proyecto para su desarrollo. Cuando trabajas con un contenedor de desarrollo en Codespaces puedes ya sea utilizar la configuración predeterminada, utilizar una configuración predeterminada o crear tu propia configuración. La opción que elijas dependerá de las herramientas, tiempos de ejecución, dependencias y flujos de trabajo que el usuario pudiese necesitar para tener éxito en tu proyecto.

Codespaces permite la personalización por proyecto y por rama con un archivo devcontainer.json. Este archivo de configuración determina el ambiente de cada codespace nuevo que cualquier persona cree en tu repositorio definiendo un contenedor de desarrollo que puede incluir marcos de trabajo, herramientas, extensiones y reenvío de puertos. También puede utilizarse un Dockerfile junto con el archivo devcontainer.json en la carpeta .devcontainer para definir todo lo que se necesita para crear una imagen de contenedor.

devcontainer.json

Este archivo puede ubicarse en la raíz del repositorio o en una carpeta que se llame .devcontainer. Si el archivo se ubica en la raíz del repositorio, el nombre del archivo debe comenzar con un punto: .devcontainer.json.

Puedes utilizar tu devcontainer.json para configurar los ajustes predeterminados para todo el ambiente de codespaces, incluyendo el editor, pero también puedes configurar ajustes específicos del editor para espacios de trabajo individuales de un codespace en un archivo llamado .vscode/settings.json.

Para obtener más información sobre la configuración y propiedades que puedes configurar en un devcontainer.json, consulta la referencia a devcontainer.json en la documentación de Visual Studio Code.

Dockerfile

Un Dockerfile también vive en la carpeta .devcontainer.

Puedes agregar un Dockerfile a tu proyecto para definir una imagen de contenedor e instalar software. En el Dockerfile, puedes utilizar FROM para especificar la imagen de contenedor.

FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14

# ** [Optional] Uncomment this section to install additional packages. **
# USER root
#
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>
#
# USER codespace

Puedes utilizar la instrucción e RUN para instalar cualquier software y && para unir comandos.

Referencia tu Dockerfile en tu archivo de devcontainer.json utilizando la propiedad dockerfile.

{
  ...
  "build": { "dockerfile": "Dockerfile" },
  ...
}

Para obtener más información sobre cómo utilizar un Dockerfile en un contenedor de dev, consulta la sección Crear un contenedor de desarrollo en la documentación de Visual Studio Code.

Utilizar la configuración predeterminada

Si no defines una configuración en tu repositorio, GitHub creará un codespace con una imagen base de Linux. La imagen base de Linux incluye lenguajes y tiempos de ejecución como Python, Node.js, JavaScript, TypeScript, C++, Java, .NET, PHP, PowerShell, Go, Ruby, y Rust. También incluye otras herramientas y utilidades de desarrollador como git, el CLI de GitHub, yarn, openssh y vim. Para ver todos los lenguajes, tiempos de ejecución y herramientas que se incluyen, utiliza el comando devcontainer-info content-url dentro de tu terminal del codespace y sigue la url que este produce.

Como alternativa, para obtener más información sobre todo lo que incluye la imagen básica de Linux, consulta el archivo más reciente del repositorio microsoft/vscode-dev-containers.

La configuración predeterminada es una buena opción si estás trabajando en un proyecto pequeño que utilice los lenguajes y herramientas que proporciona Codespaces.

Utilizar una configuración de contenedor predefinida

Las definiciones predefinidas de contenedores incluyen una configuración común para u tipo de proyecto en particular y pueden ayudarte a iniciar rápidamente con una configuración que ya tenga las opciones adecuadas del contenedor, los ajustes de Visual Studio Code y las extensiones de Visual Studio Code que deben estar instaladas.

Utilizar una configuración predefinida es una gran idea si necesitas extensibilidad adicional. También puedes iniciar con una configuración predefinida y modificarla conforme lo requieras de acuerdo con los ajustes de tu proyecto.

1. Accede a la paleta de comandos (Shift + Command + P / Ctrl + Shift + P), y luego comienza a teclear "dev container". Selecciona Codespaces: Agregar archivos de configuración del contenedor de desarrollo....

   

2. Haz clic en la definición que quieras utilizar.

3. Sigue los mensajes para personalizar tu definición.

4. Haz clic en OK (aceptar).

5. Para aplicar los cambios, en la esquina inferior derecha de la pantalla, haz clic en Reconstruir ahora. Para obtener más información sbre reconstruir tu contenedor, consulta la sección "Acplicar los cambios a tu configuración".

Crear una configuración personalizada para un codespace

Si ninguna de las configuraciones predefinidas satisface tus necesidades, puedes crear una configuración personalizada si agregas un archivo devcontainer.json. Este archivo puede ubicarse en la raíz del repositorio o en una carpeta que se llame .devcontainer. Si el archivo se ubica en la raíz del repositorio, el nombre del archivo debe comenzar con un punto: .devcontainer.json.

En el archivo, puedes utilizar las llaves de configuración compatibles para especificar los aspectos del ambiente del codespace, como cuáles extensiones de Visual Studio Code se instalarán.

Cuando configuras los ajustes de editor para Visual Studio Code, hay tres alcances disponibles: Espacio de trabajo, [Codespaces] Remotos , y Usuario. Si una configuración se define en varios alcances, los ajustes de espacio de trabajo tomarán prioridad, luego los de [Codespaces] Remotos, y luego los de Usuario.

Puedes definir la configuración predeterminada del editor para Visual Studio Code en dos lugares.

• La configuración del editor que se definió en .vscode/settings.json se aplica como una configuración con alcance de Workspace- en este codespace.
• La configuración del editor que se definió en la clave settings en devcontainer.json se aplica como una configuración con alcance de Remote [Codespaces] en este codespace.

Después de actualizar el archivo devcontainer.json, puedes reconstruir el contenedor para que tu codespace aplique los cambios. Para obtener más información, consulta la sección "Aplicar cambios a tu configuración".

Aplicar cambios a tu configuración

Después de que cambia la configuración de los Codespaces para un repositorio, puedes aplicar los cambios a un codespace existente si vuelves a compilar el contenedor para el codespace.

1. Accede a la paleta de comandos (Shift + Command + P/ Ctrl + Shift + P), y luego comienza a teclear "rebuild". Selecciona Codespaces: Reconstruir contenedor.

   

2. Si los cambios a la configuración de tu codespace causan un error de contenedor, este se ejecutará en modo de recuperación y verás un mensaje de error. Arreglar los errores en la configuración.

   • Para diagnosticar el error revisando la bitácora de creación, haz clic en Ver bitácora de creación.
   • Para arreglar los errores que se identificaron en las bitácoras, actualiza tu archivo devcontainer.json.
   • Para aplicar los cambios, vuelve a crear tu contenedor.