Getting Started

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

• Explore individual Features
• Check the GitHub Repository

Support

• GitHub Issues: helpers4/devcontainer
• Discussions: GitHub Discussions

License

MIT License - See LICENSE for details.