El blog de Deska
Dev Containers en VS Code: Guía Práctica de Configuración
Aprende a configurar Dev Containers en VS Code para entornos reproducibles y descubre cómo Deska complementa tu flujo con un lienzo local-first.
· 10 min de lectura
La estandarización de los entornos de desarrollo sigue siendo uno de los retos más persistentes en la ingeniería de software. Cuando configuras Dev Containers en VS Code, pasas de una configuración manual a un ecosistema contenedorizado y reproducible donde cada dependencia está definida en código. Este enfoque elimina el problema del "funciona en mi máquina" al asegurar que cada colaborador utilice exactamente las mismas versiones de compiladores, librerías y herramientas.
La arquitectura del desarrollo basado en contenedores
El desarrollo tradicional depende de herramientas instaladas directamente en el sistema operativo anfitrión. Esto a menudo genera conflictos de versiones entre proyectos. Los Dev Containers en VS Code resuelven esto ejecutando el editor bajo un modelo de cliente-servidor. La interfaz de usuario corre en tu máquina local, mientras que las extensiones, la terminal y el depurador se ejecutan dentro de un contenedor Linux.
El núcleo de este sistema es la carpeta .devcontainer. Dentro de este directorio, un archivo devcontainer.json indica a VS Code cómo construir y configurar el contenedor. Puedes definir Dockerfiles específicos, instalar extensiones de VS Code automáticamente al iniciar y establecer variables de entorno que están aisladas de tu sistema principal.
Configurando tu primer Dev Container
Para comenzar a usar Dev Containers en VS Code, debes tener Docker instalado y funcionando en tu equipo. El proceso implica definir el entorno y luego volver a abrir la carpeta del proyecto dentro del contenedor.
- Crea una carpeta
.devcontaineren la raíz de tu proyecto. - Agrega un archivo
devcontainer.json. - Define tu imagen, por ejemplo
mcr.microsoft.com/devcontainers/javascript-node:20. - Usa la Paleta de Comandos en VS Code y selecciona "Dev Containers: Reopen in Container".
Una vez que la construcción finaliza, la terminal dentro de VS Code es en realidad una shell dentro del contenedor Docker. Esto significa que cualquier comando npm install o pip install afecta al entorno contenedorizado, no a tu sistema operativo global.
Comparativa: VS Code Dev Containers y Deska
Mientras que VS Code se centra en la experiencia del IDE dentro de un contenedor, otras herramientas ofrecen formas distintas de gestionar el flujo de trabajo de desarrollo. Deska, por ejemplo, es una aplicación de escritorio gratuita para Mac, Windows y Linux que proporciona un espacio de trabajo en un lienzo infinito. En lugar de una sola ventana con pestañas, colocas paneles en cualquier lugar y te alejas para ver la estructura completa del proyecto.
| Característica | VS Code Dev Containers | Espacio de trabajo Deska |
|---|---|---|
| Enfoque principal | Aislamiento del entorno | Visualización del espacio |
| Interfaz | Pestañas tradicionales | Lienzo infinito |
| Modelo de extensión | Marketplace propietario | Agentes de código IA |
| Almacenamiento | Volúmenes de contenedor | Archivos locales primero |
Deska trata el espacio de trabajo como un mapa visual. Puedes abrir múltiples terminales, un editor de código basado en Monaco y widgets de navegador uno al lado del otro. Esto complementa un flujo de trabajo contenedorizado al permitirte monitorear diferentes partes de un sistema complejo simultáneamente. Si prefieres un enfoque local-first donde tus archivos y sesiones permanecen estrictamente en tu máquina, ambas herramientas se alinean bien con esa filosofía.
Configuración avanzada y personalización
Una imagen básica a menudo no es suficiente para proyectos de nivel de producción. Es posible que necesites instalar paquetes de Linux específicos o configurar la shell. Puedes lograr esto utilizando la propiedad features en tu archivo de configuración.
- Features: Son fragmentos autónomos de código de instalación. Puedes añadir soporte para Git, Docker-in-Docker o el CLI de AWS agregándolos al objeto
featuresen eldevcontainer.json. - Comandos Post-Creación: Utiliza la propiedad
postCreateCommandpara ejecutar scripts después de que el contenedor se haya creado. Esto es ideal para instalar dependencias del lenguaje o configurar esquemas de bases de datos. - Redirección de puertos: VS Code detecta automáticamente los servicios que corren en puertos dentro del contenedor y los mapea a tu localhost.
Integración de agentes de IA en el flujo de trabajo
El desarrollo moderno a menudo involucra asistentes de IA. Mientras que VS Code utiliza extensiones para esto, Deska toma un camino diferente al ejecutar agentes de código como Claude Code y Codex CLI como paneles independientes. Puedes colocar un panel de agente justo al lado de tu editor de código y una terminal.
Esta disposición visual permite ver el trabajo del agente en tiempo real. Debido a que Deska es un lienzo, puedes organizar tus interacciones de IA espacialmente. Podrías tener un área para la depuración del frontend y otra para la lógica del backend, cada una con su propio conjunto de terminales e hilos de agentes.
Seguridad y acceso remoto
La seguridad es una preocupación mayor cuando se trabaja con entornos remotos o contenedorizados. VS Code maneja esto a través de SSH o el montaje del socket de Docker. Deska ofrece una solución única para desarrolladores que necesitan alejarse de sus escritorios. A través de una aplicación móvil, puedes monitorear y continuar el trabajo desde tu teléfono mediante un relevo seguro. Los dispositivos se emparejan directamente, lo que significa que no se exponen puertos al internet público, manteniendo una postura de seguridad alta.
Para equipos que requieren una soberanía de datos estricta, la naturaleza local-first de estas herramientas es crítica. Tu código no vive en una nube de terceros. Permanece en tu hardware, incluso cuando accedes al espacio de trabajo a través del relevo móvil.
Preguntas Frecuentes
¿Cómo solucionar el rendimiento lento en Dev Containers?
Los problemas de rendimiento suelen derivar de la sobrecarga de E/S de disco entre el anfitrión y el contenedor. En Windows y Mac, usar VirtioFS o mover el código fuente a un volumen de Docker en lugar de un montaje directo puede mejorar significativamente la velocidad del sistema de archivos. Asegúrate de que los límites de recursos de Docker Desktop sean lo suficientemente altos para tu proyecto.
¿Puedo usar Dev Containers sin Docker Desktop?
Sí, puedes usar motores alternativos como Podman o Lima. Sin embargo, estos requieren configuración adicional en los ajustes de VS Code para apuntar al socket correcto. Algunas funciones como la redirección automática de puertos pueden comportarse de manera diferente según la implementación del motor.
¿Es Deska un reemplazo para VS Code?
No, sirven para propósitos diferentes. VS Code es un editor especializado con una integración profunda de contenedores. Deska es una herramienta de espacio de trabajo expansiva que destaca en agentes de código y organización visual. Muchos desarrolladores los usan juntos, utilizando VS Code para refactorizaciones pesadas y Deska para orquestar múltiples procesos y flujos de trabajo de IA.
Primeros pasos con un espacio de trabajo moderno
Si quieres ir más allá de las interfaces de pestañas tradicionales, puedes mejorar tu configuración probando nuevos paradigmas de diseño. Puedes descargar la aplicación de escritorio de Deska de forma gratuita para explorar el lienzo infinito. Ya sea que estés gestionando microservicios contenedorizados o construyendo una aplicación web sencilla, tener un espacio flexible para organizar tus paneles y notas marca una diferencia medible en la productividad diaria.