The Deska blog
Dev Containers in VS Code: A Practical Setup
Learn how to configure Dev Containers in VS Code for reproducible environments and discover how Deska complements your workflow with a local-first canvas.
· 10 min read
Standardizing development environments remains one of the most persistent challenges in software engineering. When you configure Dev Containers in VS Code, you transition from a manual setup to a containerized, reproducible ecosystem where every dependency is defined in code. This approach eliminates the "it works on my machine" problem by ensuring that every contributor uses the exact same versions of compilers, libraries, and tools.
The Architecture of Containerized Development
Traditional development relies on tools installed directly on the host operating system. This often leads to version conflicts between projects. Dev Containers in VS Code solve this by running the editor as a client-server model. The UI runs on your local machine, while the extensions, terminal, and debugger run inside a Linux container.
The core of this system is the .devcontainer folder. Inside this directory, a devcontainer.json file instructs VS Code on how to build and configure the container. You can define specific Dockerfiles, install VS Code extensions automatically upon startup, and set environment variables that are isolated from your host system.
Setting Up Your First Dev Container
To begin using Dev Containers in VS Code, you must have Docker installed and running on your machine. The process involves defining the environment and then reopening the project folder inside the container.
- Create a
.devcontainerfolder in your project root. - Add a
devcontainer.jsonfile. - Define your image, such as
mcr.microsoft.com/devcontainers/javascript-node:20. - Use the Command Palette in VS Code and select "Dev Containers: Reopen in Container".
Once the build finishes, the terminal inside VS Code is actually a shell inside the Docker container. This means any npm install or pip install command affects the containerized environment, not your global OS.
Comparison: VS Code Dev Containers and Deska
While VS Code focuses on the IDE experience within a container, other tools offer different ways to manage the broader development workflow. Deska, for example, is a free desktop app for Mac, Windows, and Linux that provides an infinite canvas workspace. Instead of a single window with tabs, you place panels anywhere and zoom out to see the entire project structure.
| Feature | VS Code Dev Containers | Deska Workspace |
|---|---|---|
| Primary Focus | Environment Isolation | Workspace Visualization |
| Interface | Traditional Tabs | Infinite Canvas |
| Extension Model | Proprietary Marketplace | AI Coding Agents |
| Storage | Container Volumes | Local-First Files |
Deska treats the workspace as a visual map. You can open multiple terminals, a Monaco-based code editor, and browser widgets side by side. This complements a containerized workflow by allowing you to monitor different parts of a complex system simultaneously. If you prefer a local-first approach where your files and sessions stay strictly on your machine, both tools align well with that philosophy.
Advanced Configuration and Customization
A basic image is often not enough for production-grade projects. You may need to install specific Linux packages or configure the shell. You can achieve this using the features property in your configuration file.
- Features: These are self-contained snippets of installation code. You can add support for Git, Docker-in-Docker, or the AWS CLI by adding them to the
featuresobject indevcontainer.json. - Post-Create Commands: Use the
postCreateCommandproperty to run scripts after the container is created. This is ideal for installing language dependencies or setting up database schemas. - Port Forwarding: VS Code automatically detects services running on ports inside the container and maps them to your localhost.
Integrating AI Agents into the Workflow
Modern development often involves AI assistants. While VS Code uses extensions for this, Deska takes a different approach by running coding agents like Claude Code and Codex CLI as independent panels. You can place an agent panel right next to your code editor and a terminal.
This visual arrangement allows you to see the agent work in real-time. Because Deska is a canvas, you can organize your AI interactions spatially. You might have one area for frontend debugging and another for backend logic, each with its own set of terminals and agent threads.
Security and Remote Access
Security is a major concern when working with remote or containerized environments. VS Code handles this through SSH or Docker socket mounting. Deska offers a unique solution for developers who need to step away from their desks. Through a mobile app, you can monitor and continue work from your phone via a secure relay. The devices pair directly, which means no ports are exposed to the public internet, maintaining a high security posture.
For teams requiring strict data sovereignty, the local-first nature of these tools is critical. Your code does not live in a third-party cloud. It stays on your hardware, even when you are accessing the workspace through the mobile relay.
Frequently Asked Questions
How to fix slow performance in Dev Containers?
Performance issues often stem from disk I/O overhead between the host and the container. On Windows and Mac, using VirtioFS or moving the source code into a Docker volume rather than a bind mount can significantly improve file system speed. Ensure your Docker Desktop resource limits are set high enough for your project requirements.
Can I use Dev Containers without Docker Desktop?
Yes, you can use alternative engines like Podman or Lima. However, these require additional configuration in the VS Code settings to point to the correct socket. Some features like automatic port forwarding might behave differently depending on the engine implementation.
Is Deska a replacement for VS Code?
No, they serve different purposes. VS Code is a specialized editor with deep container integration. Deska is an expansive workspace tool that excels at coding agents and visual organization. Many developers use them together, utilizing VS Code for heavy refactoring and Deska for orchestrating multiple processes and AI workflows.
Getting Started with a Modern Workspace
If you want to move beyond traditional tabbed interfaces, you can enhance your setup by trying new layout paradigms. You can download the Deska desktop app for free to explore the infinite canvas. Whether you are managing containerized microservices or building a simple web app, having a flexible space to organize your panels and notes makes a measurable difference in daily productivity.