Demo Dev Containers

• How to create and configure a devcontainer.json file
• How to provision a Codespace that uses that Dev Container
• How to add VS Code extensions to the repository Dev Container via the Extensions marketplace
• When and why to rebuild a Codespace after changing the Dev Container

​

devcontainer.json — what to include

• Give the Codespace environment a descriptive name
• Declare a base image or Dockerfile to use as the container environment
• Add editor customizations (for example, VS Code extensions to auto-install)
• Commit the file to your default branch so Codespaces can detect it

{
  "name": "Block Buster Codespace Environment",
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "customizations": {
    "vscode": {
      "extensions": [
        "ritwickdey.LiveServer",
        "GitHub.copilot-chat",
        "ms-azuretools.vscode-azure-github-copilot",
        "JakubKozera.github-copilot-code-reviewer"
      ]
    }
  }
}

​

Create a Codespace using the Dev Container

• Branch (for example main)
• Dev Container configuration (the devcontainer.json you added)
• Region to deploy the Codespace (choose a nearby region to reduce latency)
• Machine type (for example, 2-core or 4-core)

• Pulls the specified image
• Applies declared settings
• Installs the listed VS Code extensions automatically

​

Add extensions from the Extensions marketplace

1. Open the Extensions marketplace view
2. Right-click an extension and choose “Add to devcontainer.json”
3. Codespaces appends the extension identifier to customizations.vscode.extensions in devcontainer.json

​

Links and references

• Dev Containers overview: https://code.visualstudio.com/docs/devcontainers/containers
• Dev Containers configuration reference: https://containers.dev/
• GitHub Codespaces docs: https://docs.github.com/en/codespaces
• VS Code Extensions marketplace: https://marketplace.visualstudio.com/vscode