DevContainer Setup for Development

DevContainer Setup for Claude Code Development

Overview

This document provides comprehensive research on setting up devcontainers for Claude Code development, focusing on TypeScript/Node.js projects with optimal VS Code integration.

1. DevContainer Configuration (devcontainer.json)

Basic Structure for TypeScript Development

{
  "name": "Claude Code TypeScript Development",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  },
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "zsh",
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "eslint.autoFixOnSave": true,
        "[typescript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "typescript.updateImportsOnFileMove.enabled": "always",
        "typescript.preferences.includePackageJsonAutoImports": "on"
      },
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens",
        "streetsidesoftware.code-spell-checker",
        "ms-vscode.vscode-typescript-tslint-plugin"
      ]
    }
  },
  "postCreateCommand": "npm install && npm install -g typescript",
  "remoteUser": "node"
}

Claude Code Specific Configuration

Based on the official Claude Code repository:

{
  "name": "Claude Code Sandbox",
  "build": {
    "dockerfile": "Dockerfile",
    "args": {
      "TIMEZONE": "America/Los_Angeles"
    }
  },
  "remoteUser": "node",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "eslint.autoFixOnSave": true,
        "terminal.integrated.defaultProfile.linux": "zsh"
      }
    }
  },
  "mounts": [
    "source=bash-history,target=/home/node/.bash_history,type=volume",
    "source=claude-config,target=/home/node/.config/claude-code,type=volume"
  ],
  "remoteEnv": {
    "NODE_OPTIONS": "--max-old-space-size=4096",
    "CLAUDE_CONFIG_DIR": "/home/node/.config/claude-code",
    "POWERLEVEL9K_DISABLE_GITSTATUS": "true"
  },
  "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind",
  "workspaceFolder": "/workspace",
  "postCreateCommand": "sudo /usr/local/bin/init-firewall.sh"
}

2. VS Code Integration with Claude Code

Extension Setup

The Claude Code VS Code extension works in conjunction with the CLI tool. Key integration points:

1. Claude Code Extension: Available in VS Code Marketplace as anthropic.claude-code
2. Dependencies: The VS Code extension depends on Claude Code CLI being installed
3. Features:
   • Real-time code suggestions
   • Code navigation assistance
   • Automated edits
   • Test generation
   • Git workflow management

Model Context Protocol (MCP) Integration

For enhanced security and functionality:

// claude_desktop_config.json
{
  "mcpServers": {
    "devcontainer": {
      "command": "docker",
      "args": ["exec", "-i", "your-container-name", "node", "/path/to/mcp-server.js"]
    }
  }
}

3. Essential Extensions and Settings

Recommended Extensions for TypeScript Development

"extensions": [
  // Linting & Formatting
  "dbaeumer.vscode-eslint",
  "esbenp.prettier-vscode",
  
  // TypeScript Specific
  "ms-vscode.vscode-typescript-tslint-plugin",
  "streetsidesoftware.code-spell-checker",
  
  // Git Integration
  "eamodio.gitlens",
  "mhutchie.git-graph",
  
  // Testing
  "hbenl.vscode-test-explorer",
  "Orta.vscode-jest",
  
  // Productivity
  "christian-kohler.path-intellisense",
  "formulahendry.auto-rename-tag",
  "aaron-bond.better-comments"
]

Optimal VS Code Settings

"settings": {
  // Editor
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.suggestSelection": "first",
  "editor.snippetSuggestions": "top",
  
  // TypeScript
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  
  // Prettier
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // Terminal
  "terminal.integrated.defaultProfile.linux": "zsh",
  "terminal.integrated.profiles.linux": {
    "zsh": {
      "path": "/bin/zsh",
      "icon": "terminal-zsh"
    }
  }
}

4. TypeScript Development in DevContainers

Dockerfile for TypeScript/Claude Code Development

FROM mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm
 
# Install additional tools
RUN apt-get update && apt-get install -y \
    git \
    zsh \
    fzf \
    jq \
    && rm -rf /var/lib/apt/lists/*
 
# Install global npm packages
RUN npm install -g \
    typescript \
    ts-node \
    tsx \
    @claude-ai/claude-code \
    npm-check-updates \
    concurrently
 
# Install oh-my-zsh
RUN sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" "" --unattended
 
# Set up workspace
WORKDIR /workspace
 
# Switch to non-root user
USER node

Post-Creation Setup Commands

"postCreateCommand": {
  "Install Dependencies": "npm ci",
  "Setup TypeScript": "npm install -g typescript tsx",
  "Install Claude Code": "npm install -g @claude-ai/claude-code",
  "Configure Git": "git config --global core.editor 'code --wait'"
}

5. Best Practices and Common Patterns

Security Best Practices

1. Network Isolation: Use firewall rules to restrict outbound connections
2. Non-Root User: Always run as non-root user (typically “node”)
3. Volume Mounts: Use named volumes for persistent data
4. Environment Variables: Store sensitive data in .env files (not in devcontainer.json)

Development Workflow

1. Research First: Ask Claude to research and plan before coding
2. Custom Commands: Store team workflows in .claude/commands/
3. Git Integration: Ensure gh CLI is installed for GitHub operations
4. Testing: Include test runners and coverage tools in the container

Performance Optimization

"remoteEnv": {
  "NODE_OPTIONS": "--max-old-space-size=4096",
  "TYPESCRIPT_MEMORY": "4096"
}

Multi-Service Setup (Docker Compose)

version: '3.8'
services:
  app:
    build: 
      context: .
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - .:/workspace:cached
      - node_modules:/workspace/node_modules
    command: sleep infinity
    environment:
      - DATABASE_URL=postgres://user:pass@db:5432/myapp
  
  db:
    image: postgres:15
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: myapp
 
volumes:
  node_modules:

DevContainer Features

Leverage community features for additional functionality:

"features": {
  "ghcr.io/devcontainers/features/github-cli:1": {},
  "ghcr.io/devcontainers/features/docker-in-docker:2": {},
  "ghcr.io/devcontainers/features/node:1": {
    "version": "lts",
    "nodeGypDependencies": true
  }
}

6. Troubleshooting Common Issues

Extensions Not Installing

• Verify extension IDs are correct
• Check for conflicts between extensions
• Use “Add to devcontainer.json” from VS Code command palette

TypeScript Memory Issues

• Increase maxTsServerMemory in settings
• Set NODE_OPTIONS environment variable
• Consider using project references for large codebases

Container Performance

• Use cached volume mounts for source code
• Exclude node_modules from bind mounts
• Enable Docker BuildKit for faster builds

Resources

• Official DevContainers Specification
• Claude Code Repository
• Microsoft TypeScript DevContainer
• VS Code DevContainers Documentation