Skip to main content

Getting Started with DevContainer Features

Welcome to the helpers4 DevContainer Features collection! Pre-configured development environment containers for modern web development.

What is a DevContainer?​

A DevContainer is a development container specification that provides a consistent, reproducible development environment. It ensures all team members have the same tools, versions, and configurations.

Quick Start​

  1. Install VS Code Extension

    Install the DevContainers extension

  2. Create devcontainer.json

    {
      "name": "Vite+ Dev",
      "image": "ghcr.io/helpers4/devcontainer/vite-plus:latest",
      "features": {
        "ghcr.io/helpers4/devcontainer/vite-plus": {}
      }
    }

  3. Open in Container

    • Press F1 and select "Dev Containers: Open Folder in Container"
    • VS Code will build and start the container
    • You're ready to code!

Available Features​

vite-plus​

Complete Vite+ development environment with optimized tooling.

{
  "image": "ghcr.io/helpers4/devcontainer/vite-plus:latest"
}

Includes:

  • Vite 6.x
  • Node.js 20+
  • pnpm 9+
  • Oxc (linter/formatter)
  • VS Code extensions (Oxc, Vitest)

Full Documentation →

typescript-dev​

TypeScript development environment with strict mode best practices.

{
  "image": "ghcr.io/helpers4/devcontainer/typescript-dev:latest"
}

Full Documentation →

git-absorb​

Git absorb integration for interactive rebase workflows.

{
  "features": {
    "ghcr.io/helpers4/devcontainer/git-absorb": {}
  }
}

Full Documentation →

shell-history-per-project​

Separate shell history per project for better organization.

{
  "features": {
    "ghcr.io/helpers4/devcontainer/shell-history-per-project": {}
  }
}

Full Documentation →

local-mounts​

Configure local mount points for development.

{
  "features": {
    "ghcr.io/helpers4/devcontainer/local-mounts": {}
  }
}

Full Documentation →

angular-dev​

Pre-configured Angular development environment.

{
  "image": "ghcr.io/helpers4/devcontainer/angular-dev:latest"
}

Full Documentation →

package-auto-install​

Automatically install npm/pnpm packages on container start.

{
  "features": {
    "ghcr.io/helpers4/devcontainer/package-auto-install": {}
  }
}

Full Documentation →

Combining Features​

Mix multiple features for your perfect environment:

{
  "name": "Vite+ Project",
  "image": "ghcr.io/helpers4/devcontainer/vite-plus:latest",
  "features": {
    "ghcr.io/helpers4/devcontainer/shell-history-per-project": {},
    "ghcr.io/helpers4/devcontainer/local-mounts": {}
  },
  "postCreateCommand": "pnpm install"
}

Configuration Files​

All features support standard devcontainer.json configuration:

{
  "name": "Development",
  "image": "ghcr.io/helpers4/devcontainer/vite-plus:latest",
  "features": {},
  "forwardPorts": [3000, 5173],
  "postCreateCommand": "pnpm install",
  "customizations": {
    "vscode": {
      "extensions": ["Vue.volar", "dbaeumer.vscode-eslint"]
    }
  }
}

Next Steps​

Support​

License​

MIT License - See LICENSE for details.