vscode-dev-containers

NOTE: Most of the contents of this repository have been migrated to the new devcontainers GitHub org (https://github.com/devcontainers). See https://github.com/devcontainers/template-starter and https://github.com/devcontainers/feature-starter for information on creating your own!

4,712

1,402

4,712

221

View on GitHub

Top Related Projects

gitpod

12,811

The developer platform for on-demand cloud development environments to create software faster and more securely.

code-server

68,068

VS Code in the browser

theia

19,976

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

images

1,275

Repository for pre-built dev container images published under mcr.microsoft.com/devcontainers

Quick Overview

The microsoft/vscode-dev-containers repository is a collection of development container definitions for Visual Studio Code. It provides pre-configured container environments for various programming languages, frameworks, and tools, enabling developers to quickly set up consistent development environments across different machines.

Pros

Simplifies environment setup and reduces "it works on my machine" issues
Provides a wide range of pre-configured containers for various technologies
Enables easy customization and extension of existing container definitions
Integrates seamlessly with Visual Studio Code's Remote - Containers extension

Cons

Requires Docker to be installed and running on the host machine
May have a learning curve for developers new to containerization
Some container definitions may become outdated if not regularly maintained
Can consume significant disk space when multiple containers are used

Getting Started

Install Visual Studio Code and the Remote - Containers extension.
Install Docker on your machine.
Open a project folder in VS Code.
Press F1 and select "Remote-Containers: Add Development Container Configuration Files..."
Choose a container definition that matches your project's needs.
VS Code will create a .devcontainer folder with the necessary configuration files.
Reopen the folder in a container by clicking the notification or running "Remote-Containers: Reopen in Container" from the command palette.

Example .devcontainer/devcontainer.json:

{
  "name": "Node.js",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14",
  "extensions": [
    "dbaeumer.vscode-eslint"
  ],
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "postCreateCommand": "npm install"
}

This configuration sets up a Node.js development environment with ESLint extension and automatically runs npm install after the container is created.

Competitor Comparisons

gitpod

12,811

The developer platform for on-demand cloud development environments to create software faster and more securely.

Pros of Gitpod

Provides a complete cloud-based development environment
Supports multiple IDEs, including VS Code, IntelliJ, and others
Offers automatic workspace snapshots and prebuilds for faster startup

Cons of Gitpod

Requires an internet connection for development
May have limitations on free tier usage and resources
Learning curve for configuring and customizing workspaces

Code Comparison

vscode-dev-containers:

{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "extensions": [
    "dbaeumer.vscode-eslint"
  ]
}

Gitpod:

image:
  file: .gitpod.Dockerfile
tasks:
  - init: npm install
    command: npm run dev
vscode:
  extensions:
    - dbaeumer.vscode-eslint

Both projects aim to provide development environments, but vscode-dev-containers focuses on local container-based setups, while Gitpod offers a cloud-based solution. vscode-dev-containers uses a JSON configuration file, whereas Gitpod uses YAML. Gitpod's configuration includes additional features like startup tasks and workspace image definitions.

code-server

68,068

VS Code in the browser

Pros of code-server

Runs a full VS Code instance in the browser, accessible from any device
Supports remote development without local VS Code installation
Easier to set up and manage for multi-user environments

Cons of code-server

May have performance limitations compared to native VS Code
Requires more server resources to run the full VS Code instance
Some VS Code extensions may not work or require additional configuration

Code Comparison

vscode-dev-containers:

{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "extensions": [
    "dbaeumer.vscode-eslint"
  ]
}

code-server:

version: "3.8"
services:
  code-server:
    image: codercom/code-server:latest
    volumes:
      - "$PWD:/home/coder/project"
    ports:
      - "8080:8080"

The vscode-dev-containers example shows a devcontainer configuration, while the code-server example demonstrates a Docker Compose setup for running the server.

theia

19,976

Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

Pros of Theia

More flexible and customizable architecture, allowing for easier integration into various platforms and environments
Supports multiple programming languages and can be extended with custom language servers
Provides a web-based IDE experience, making it accessible from any device with a browser

Cons of Theia

Steeper learning curve for developers due to its more complex architecture
Smaller community and ecosystem compared to VS Code, resulting in fewer extensions and resources
May require more setup and configuration to achieve the same functionality as VS Code Dev Containers

Code Comparison

Theia:

import { injectable } from 'inversify';
import { MenuModelRegistry } from '@theia/core';

@injectable()
export class MyMenuContribution implements MenuContribution {
    registerMenus(menus: MenuModelRegistry): void {
        // Custom menu registration
    }
}

VS Code Dev Containers:

{
    "name": "My Dev Container",
    "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:0-14",
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    }
}

The code snippets showcase the different approaches: Theia uses a more programmatic, TypeScript-based configuration, while VS Code Dev Containers relies on JSON-based configuration files for container setup.

images

1,275

Repository for pre-built dev container images published under mcr.microsoft.com/devcontainers

Pros of images

More focused and streamlined repository specifically for container images
Potentially easier to contribute to and maintain due to its specialized scope
May offer more flexibility for users who want to customize their dev container images

Cons of images

Less integrated with VS Code-specific features and extensions
Might have a smaller community and fewer resources compared to the more established vscode-dev-containers
Could require additional configuration to work seamlessly with VS Code

Code Comparison

vscode-dev-containers:

{
  "name": "Node.js",
  "build": {
    "dockerfile": "Dockerfile",
    "args": { "VARIANT": "14" }
  },
  "extensions": ["dbaeumer.vscode-eslint"]
}

images:

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

RUN apt-get update && apt-get install -y \
    git \
    && rm -rf /var/lib/apt/lists/*

The vscode-dev-containers example shows a devcontainer.json configuration, while the images example demonstrates a Dockerfile. This highlights the different approaches: vscode-dev-containers provides a more integrated VS Code experience, while images focuses on the container image itself.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

IMPORTANT NOTE: Dev containers have a new, expanded home in the dev containers GitHub org! We're so excited to connect with you there. To learn more, you can check out our migration announcement.

This repository is no longer active and was archived in November 2023. We've migrated most of the contents of this repo to the devcontainers GitHub org, as part of the work on the open Dev Container specification.

Features managed by the Dev Container spec maintainers (such as the VS Code team) are now in devcontainers/features.
Definitions/Templates managed by the Dev Container spec maintainers are now in devcontainers/templates.
mcr.microsoft.com/devcontainers and mcr.microsoft.com/vscode/devcontainers images are now published from devcontainers/images.

For new Templates/Features, you can now self-publish and optionally make them visible in-tool by following the steps one of the quick start repositories: Templates quick start, Features quick start. No need to submit a PR here anymore.

For more details, you can review the announcement issue and latest archiving announcement.

[Deprecated] VS Code / GitHub Codespaces Dev Container Definitions

Visual Studio Code Dev Containers and GitHub Codespaces
Open your code in the cloud, in a local container, on a remote machine, or in WSL and take advantage of VS Code's full feature set.

IMPORTANT NOTE: As noted in the section above, this repository is no longer active and will be archived in November 2023.

A development container is a running Docker container with a well-defined tool/runtime stack and its prerequisites. The VS Code Dev Containers extension and GitHub Codespaces allow you to open or clone code in a local or cloud-hosted Dev Container and take advantage of VS Code's full development feature set.

This repository contains a set of Dev Container definition templates to help get you up and running with a containerized environment. The definitions describe the appropriate container image, runtime arguments for starting the container, and VS Code extensions that should be installed. Each provides a container configuration file (devcontainer.json) and other needed files that you can drop into any existing folder as a starting point for containerizing your project. You can use the Add Development Container Configuration Files... command to add one to your project or codespace.

The vscode-remote-try-* repositories may also be of interest if you are looking for complete sample projects.

Adding a definition to a project or codespace

Either create a codespace for your repository or set up your local machine for use with the Dev Containers extension, start VS Code, and open your project folder.
Press F1, and select the Add Development Container Configuration Files... command for Dev Containers or Codespaces.
Pick one of the recommended definitions from the list or select Show All Definitions... to see all of them. You may need to choose the From a predefined container configuration definition... option if your project has an existing Dockerfile or Docker Compose file. Answer any questions that appear.
See the definition's README for configuration options. A link is available in the .devcontainer/devcontainer.json file added to your folder.
Run Remote-Containers: Reopen in Container to use it locally, or Codespaces: Rebuild Container from within a codespace.

Adding a definition to a repository

You can share a customized Dev Container definitions for your project by adding the files under .devcontainer to source control.

Anyone who then opens a local copy of your repo in VS Code will be prompted to reopen the folder in a container, provided they have the Dev Containers extension installed. Additionally, this will be used whenever someone creates a codespace in GitHub Codespaces for the repository.

Your team now has a consistent environment and tool-chain and new contributors or team members can be productive quickly. First-time contributors will require less guidance and there will be fewer issues related to environment setup.

Sample projects

If you want to try a sample project which already has a Dev Container, check out one of the following repositories:

containers - Contains reusable Dev Container definitions.
script-library - Includes scripts used in this repository to install things. Also useful in your own Dockerfiles.
container-templates - Contains templates for creating your own container definitions or to contribute back.

Common Questions

Can I just reuse an existing container image or Docker / Docker Compose configuration?

Yes! If you have a Dockerfile or Docker Compose file in your project/repository, follow the same steps to add a definition and you'll be prompted to select a Dockerfile or Docker Compose file and customize from there. If you then commit these files to a Git repository, you can use it with GitHub Codespaces as well. If you prefer, you can also start up the container manually and attach to it. However, note that many images will be missing things like git that you will want to use. There are scripts in the script-library like the common script that can help adding these to your existing Dockerfile or image.

What is the goal of `devcontainer.json`?

A devcontainer.json file is similar to launch.json for debugging, but designed to launch (or attach to) a development container instead. At its simplest, all you need is a .devcontainer/devcontainer.json file in your project that references an image, Dockerfile, or docker-compose.yml, and a few properties. You can adapt it for use in a wide variety of situations.

Contributing and feedback

Have a question or feedback?

We've migrated most of the contents of this repo to the devcontainers GitHub org, as part of the work on the open Dev Container specification.

Features managed by the Dev Container spec maintainers are now in devcontainers/features.
Definitions/Templates managed by the Dev Container spec maintainers are now in devcontainers/templates.
mcr.microsoft.com/devcontainers and mcr.microsoft.com/vscode/devcontainers images are now published from devcontainers/images.

As a result, this repository only used for community definitions that have not been migrated elsewhere by their owners. If you are a community owner and want us to remove an existing definition here, feel free to submit a PR to do so!

For new Templates/Features, you can now self-publish and optionally make them visible in-tool by following the steps one of the quick start repositories: Templates quick start, Features quick start.

You can also:

Provide feedback for the VS Code Dev Containers extension or GitHub Codespaces.
Discuss the Dev Container spec or join the Slack channel
Make proposals for improvments to the Dev Container spec repository.
Contribute to the Dev Container CLI.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

License

For images generated from this repository, see LICENSE and NOTICE.txt.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Getting Started

Competitor Comparisons

Pros of Gitpod

Cons of Gitpod

Code Comparison

Pros of code-server

Cons of code-server

Code Comparison

Pros of Theia

Cons of Theia

Code Comparison

Pros of images

Cons of images

Code Comparison

Convert designs to code with AI

README

[Deprecated] VS Code / GitHub Codespaces Dev Container Definitions

Adding a definition to a project or codespace

Adding a definition to a repository

Sample projects

Contents

Common Questions

Can I just reuse an existing container image or Docker / Docker Compose configuration?

What is the goal of devcontainer.json?

Contributing and feedback

License

Top Related Projects

Convert designs to code with AI

What is the goal of `devcontainer.json`?