DEV Community

Cover image for Lightning-Fast Development with Zed and Dev Containers
Alessandro Annini
Alessandro Annini

Posted on • Originally published at Medium

Lightning-Fast Development with Zed and Dev Containers

Ever found yourself saying “but it works on my machine” or spent hours setting up a development environment for a new team member? Dev Containers might just be the solution you’re looking for, and now you can use them with the blazingly fast Zed editor.

What’s a Dev Container?

Think of a dev container as a pre-configured development environment in a box. It’s a Docker container that comes with all the tools, libraries, and configurations your project needs. The beauty is that it’s consistent across all machines — whether you’re coding on a MacBook Pro, a Windows desktop, or a Linux laptop.

Dev Containers can include:

  • Programming languages and runtimes
  • Build tools and package managers
  • Environment variables and settings
  • Extensions and tooling
  • Even GUI applications!

The best part? Everything is defined in code through a “devcontainer.json*”* file, making it version-controlled and shareable with your team.

Why Should You Care?

  1. Onboarding Made Easy: New team member? “Clone the repo and start the dev container” — that’s it. No more multi-page setup docs.
  2. Consistency is King: Everyone on the team uses exactly the same environment. No more “works on my machine” syndrome.
  3. Isolation is Bliss: Each project can have its own contained environment without conflicting with other projects or your system.
  4. CI/CD Parity: Your development environment can match your CI/CD pipeline exactly, reducing deployment surprises.

Enter Zed Tasks

Zed is a high-performance code editor that’s gaining popularity for its speed and simplicity. One of its powerful features is Tasks — a way to define and run commands directly from the editor.

Zed Tasks allow you to:

  • Define reusable commands in JSON
  • Run them with keyboard shortcuts
  • See output in an integrated terminal
  • Access editor context (like current file path or selected text)

Setup Dev Containers + Zed Tasks

While VS Code has built-in support for dev containers, we can achieve similar functionality in Zed using Tasks and the Dev Container CLI. Here’s how to set it up:

1. Install the Prerequisites

First, install the Dev Container CLI:

npm install -g @devcontainers/cli
Enter fullscreen mode Exit fullscreen mode

2. Set Up Your Dev Container

Create a .devcontainer/devcontainer.json\ file in your project root. Here’s a simple example for a Node.js project:

{
  "name": "Node.js Project",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
  "forwardPorts": [
    3000
  ],
  "postCreateCommand": "npm install",
  "postStartCommand": "npm run dev"
}
Enter fullscreen mode Exit fullscreen mode

3. Configure Zed Tasks

Create a .zed/tasks.json\ file in your project root with these tasks:

[
  {
    "label": "DevContainer: Up",
    "command": "devcontainer up - workspace-folder ${ZED_WORKTREE_ROOT}",
    "use_new_terminal": true,
    "allow_concurrent_runs": false,
    "reveal": "always"
  },
  {
    "label": "DevContainer: Build",
    "command": "devcontainer build - workspace-folder ${ZED_WORKTREE_ROOT}",
    "use_new_terminal": true,
    "allow_concurrent_runs": false,
    "reveal": "always"
  },
  {
    "label": "DevContainer: Exec",
    "command": "devcontainer exec - workspace-folder ${ZED_WORKTREE_ROOT} ${1}",
    "use_new_terminal": true,
    "allow_concurrent_runs": true,
    "reveal": "always"
  },
  {
    "label": "DevContainer: Run User Commands",
    "command": "devcontainer run-user-commands - workspace-folder ${ZED_WORKTREE_ROOT}",
    "use_new_terminal": true,
    "allow_concurrent_runs": false,
    "reveal": "always"
  }
]
Enter fullscreen mode Exit fullscreen mode

4. Using Your Dev Container

1. Open your project in Zed\
2. Press Cmd/Ctrl + Shift + P\ to open the command palette\
3. Type task: spawn\ and select it\
4. Choose “DevContainer: Build” to build your container\
5. Use “DevContainer: Up” to start it\
6. Run commands inside your container with “DevContainer: Exec”

Understanding Container Lifecycle Commands

Your dev container can automate setup and initialization through lifecycle commands. These commands run at different stages of your container’s lifecycle:

  1. postCreateCommand\ Runs once after the container is created. Perfect for initial setup:
{
  "postCreateCommand": "npm install && npm run db:migrate"
}
Enter fullscreen mode Exit fullscreen mode

2. postStartCommand\
Runs every time the container starts. Ideal for development servers:

{
  "postStartCommand": {
    "server": "npm run dev",
    "db": "docker run postgres",
    "watch": "npm run watch"
  }
}
Enter fullscreen mode Exit fullscreen mode

3. postAttachCommand\
Runs when you connect to the container. Good for session setup:

{
  "postAttachCommand": "source ~/.nvm/nvm.sh"
}
Enter fullscreen mode Exit fullscreen mode

To execute these commands in Zed, use the “DevContainer: Run User Commands” task after starting your container.

Pro Tips

1. Custom Key Bindings: Add this to your keymap.json to quickly spawn your container:

{
  "context": "Workspace",
  "bindings": {
    "alt-d u": [
      "task::Spawn",
      {
        "task_name": "DevContainer: Up"
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

2. One-Shot Commands: Need to run a quick command? Use the task spawn modal and type:

devcontainer exec — workspace-folder ${ZED_WORKTREE_ROOT} npm test
Enter fullscreen mode Exit fullscreen mode

3. Task Variables: Use Zed’s built-in variables like ${ZED\_FILE}\ to reference the absolute path of the currently opened.

4. Combined Startup: Create a single task for starting development:

{
  "label": "DevContainer: Start Development",
  "command": "devcontainer up - workspace-folder ${ZED_WORKTREE_ROOT} && devcontainer run-user-commands - workspace-folder ${ZED_WORKTREE_ROOT}",
  "use_new_terminal": true,
  "allow_concurrent_runs": false,
  "reveal": "always"
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

While this setup requires a bit more configuration than VS Code’s integrated solution, it brings the power of dev containers to Zed’s lightning-fast editor. You get the best of both worlds: Zed’s performance and simplicity, combined with the consistency and isolation of dev containers.

The dev container ecosystem is growing rapidly, with support from major players like GitHub, Microsoft, and others. By setting up this workflow in Zed, you’re future-proofing your development environment while keeping it blazingly fast.

Give it a try, and you might find that dev containers + Zed is the workflow you’ve been looking for all along.

Want to learn more? Check out the Dev Container Specification and Zed’s documentation.


This is me on LinkedIn, Twitter and Github.

Top comments (0)