devcontainer-setup

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Devcontainer Setup Skill

Devcontainer配置技能

Set up a complete VS Code Dev Container configuration with Docker and Claude Code CLI support.
为VS Code配置完整的Dev Container环境,支持Docker和Claude Code CLI。

Information Gathering

信息收集

Before creating the devcontainer, gather the following information from the user:
在创建devcontainer之前,向用户收集以下信息:

Required Information

必要信息

  1. Project Name: What is the project/container name? (e.g.,
    my-project
    ,
    shipshitdev-api
    )
  2. Base Image: What runtime does this project use?
    • oven/bun:1.3.5
      - Bun projects (recommended for speed)
    • node:20-slim
      - Node.js projects
    • node:20
      - Node.js with more tools
    • Custom image path
  3. Package Manager: Which package manager?
    • bun
      - Bun (default for Bun projects)
    • npm
      - npm
    • pnpm
      - pnpm
    • yarn
      - Yarn
  4. Ports: What ports need to be forwarded? (comma-separated, e.g.,
    3000, 3001, 5432
    )
  5. Port Labels (optional): Labels for each port (e.g.,
    3000=Web, 5432=Postgres
    )
  6. Parent Directory Mount: Should the parent directory be mounted for cross-repo access?
    • Yes - Mount parent as
      /workspace
      (good for monorepos, shared libraries)
    • No - Only mount this project
  7. Claude Code Support: Include Claude Code CLI setup?
    • Yes - Install Claude Code and fix symlinks for container use
    • No - Skip Claude Code setup
  8. VS Code Extensions (optional): Additional extensions to install (comma-separated extension IDs)
  9. Monorepo Structure (if applicable):
    • Is this a monorepo with nested package.json files?
    • What are the app/package directories? (e.g.,
      apps/*, packages/*
      )
  1. 项目名称:项目/容器的名称是什么?(例如:
    my-project
    shipshitdev-api
  2. 基础镜像:该项目使用什么运行时?
    • oven/bun:1.3.5
      - Bun项目(推荐用于提升速度)
    • node:20-slim
      - Node.js项目
    • node:20
      - 附带更多工具的Node.js项目
    • 自定义镜像路径
  3. 包管理器:使用哪种包管理器?
    • bun
      - Bun(Bun项目默认选项)
    • npm
      - npm
    • pnpm
      - pnpm
    • yarn
      - Yarn
  4. 端口:需要转发哪些端口?(逗号分隔,例如:
    3000, 3001, 5432
  5. 端口标签(可选):每个端口的标签(例如:
    3000=Web, 5432=Postgres
  6. 父目录挂载:是否需要挂载父目录以实现跨仓库访问?
    • 是 - 将父目录挂载为
      /workspace
      (适用于单体仓库、共享库)
    • 否 - 仅挂载当前项目
  7. Claude Code支持:是否包含Claude Code CLI配置?
    • 是 - 安装Claude Code并修复容器使用的符号链接
    • 否 - 跳过Claude Code配置
  8. VS Code扩展(可选):需要安装的额外扩展(逗号分隔的扩展ID)
  9. 单体仓库结构(如适用):
    • 这是否是包含嵌套package.json文件的单体仓库?
    • 应用/包目录有哪些?(例如:
      apps/*, packages/*

File Structure to Create

要创建的文件结构

.devcontainer/
├── devcontainer.json      # VS Code dev container config
├── Dockerfile             # Container image definition
├── docker-compose.yml     # Docker compose config
├── setup.sh               # Post-create setup script
└── README.md              # Documentation
.devcontainer/
├── devcontainer.json      # VS Code开发容器配置
├── Dockerfile             # 容器镜像定义
├── docker-compose.yml     # Docker Compose配置
├── setup.sh               # 创建后设置脚本
└── README.md              # 文档说明

Template: devcontainer.json

模板:devcontainer.json

json
{
  "name": "{{PROJECT_NAME}}",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "workspaceFolder": "/workspace/{{PROJECT_DIR}}",
  "containerName": "{{PROJECT_NAME}}",

  // Mounts - adjust based on user preferences
  "mounts": [
    // If parent mount enabled:
    "source=${localWorkspaceFolder}/..,target=/workspace,type=bind,consistency=cached",
    // Mount host Claude config for plugins, settings, history
    "source=${localEnv:HOME}/.claude,target=/root/.claude,type=bind,consistency=cached"
  ],

  // Features to install
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  },

  // VS Code extensions
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "biomejs.biome",
        "bradlc.vscode-tailwindcss",
        "esbenp.prettier-vscode",
        "ms-playwright.playwright",
        "ms-vscode.vscode-typescript-next"
        // Add user-specified extensions here
      ],
      "settings": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "quickfix.biome": "explicit",
          "source.organizeImports.biome": "explicit"
        }
      }
    }
  },

  // Forward ports
  "forwardPorts": [{{PORTS}}],
  "portsAttributes": {
    // Add port labels here
  },

  // Post-create command runs the setup script
  "postCreateCommand": "bash /workspace/{{PROJECT_DIR}}/.devcontainer/setup.sh",

  // Use root to avoid permission issues
  "remoteUser": "root",

  // Keep container running
  "overrideCommand": true
}
json
{
  "name": "{{PROJECT_NAME}}",
  "build": {
    "dockerfile": "Dockerfile",
    "context": ".."
  },
  "workspaceFolder": "/workspace/{{PROJECT_DIR}}",
  "containerName": "{{PROJECT_NAME}}",

  // 挂载项 - 根据用户偏好调整
  "mounts": [
    // 如果启用父目录挂载:
    "source=${localWorkspaceFolder}/..,target=/workspace,type=bind,consistency=cached",
    // 挂载主机Claude配置用于插件、设置、历史记录
    "source=${localEnv:HOME}/.claude,target=/root/.claude,type=bind,consistency=cached"
  ],

  // 要安装的功能
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  },

  // VS Code扩展
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "biomejs.biome",
        "bradlc.vscode-tailwindcss",
        "esbenp.prettier-vscode",
        "ms-playwright.playwright",
        "ms-vscode.vscode-typescript-next"
        // 在此处添加用户指定的扩展
      ],
      "settings": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "quickfix.biome": "explicit",
          "source.organizeImports.biome": "explicit"
        }
      }
    }
  },

  // 转发端口
  "forwardPorts": [{{PORTS}}],
  "portsAttributes": {
    // 在此处添加端口标签
  },

  // 创建后命令运行设置脚本
  "postCreateCommand": "bash /workspace/{{PROJECT_DIR}}/.devcontainer/setup.sh",

  // 使用root用户避免权限问题
  "remoteUser": "root",

  // 保持容器运行
  "overrideCommand": true
}

Template: Dockerfile

模板:Dockerfile

dockerfile
undefined
dockerfile
undefined

Development container for {{PROJECT_NAME}}

Development container for {{PROJECT_NAME}}

FROM {{BASE_IMAGE}}
WORKDIR /workspace/{{PROJECT_DIR}}
FROM {{BASE_IMAGE}}
WORKDIR /workspace/{{PROJECT_DIR}}

Install dependencies

Install dependencies

COPY package.json {{LOCK_FILE}} {{ADDITIONAL_CONFIG_FILES}} ./ {{#if MONOREPO_DIRS}} {{#each MONOREPO_DIRS}} COPY {{this}} ./{{this}} {{/each}} {{/if}}
RUN {{INSTALL_COMMAND}}
COPY package.json {{LOCK_FILE}} {{ADDITIONAL_CONFIG_FILES}} ./ {{#if MONOREPO_DIRS}} {{#each MONOREPO_DIRS}} COPY {{this}} ./{{this}} {{/each}} {{/if}}
RUN {{INSTALL_COMMAND}}

Install useful dev tools

Install useful dev tools

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

Expose ports

Expose ports

EXPOSE {{PORTS}}
CMD ["sleep", "infinity"]
undefined
EXPOSE {{PORTS}}
CMD ["sleep", "infinity"]
undefined

Template: docker-compose.yml

模板:docker-compose.yml

yaml
version: '3.8'

services:
  {{SERVICE_NAME}}:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    container_name: {{PROJECT_NAME}}
    volumes:
      # Mount entire parent folder for cross-repo access (if enabled)
      - ../..:/workspace
      # Mount host Claude config
      - ~/.claude:/root/.claude
      # Preserve node_modules in container (performance)
      - /workspace/{{PROJECT_DIR}}/node_modules
      {{#each MONOREPO_NODE_MODULES}}
      - /workspace/{{PROJECT_DIR}}/{{this}}/node_modules
      {{/each}}
    ports:
      {{#each PORTS}}
      - "{{this}}:{{this}}"
      {{/each}}
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true
    working_dir: /workspace/{{PROJECT_DIR}}
    command: {{DEV_COMMAND}}
yaml
version: '3.8'

services:
  {{SERVICE_NAME}}:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    container_name: {{PROJECT_NAME}}
    volumes:
      # Mount entire parent folder for cross-repo access (if enabled)
      - ../..:/workspace
      # Mount host Claude config
      - ~/.claude:/root/.claude
      # Preserve node_modules in container (performance)
      - /workspace/{{PROJECT_DIR}}/node_modules
      {{#each MONOREPO_NODE_MODULES}}
      - /workspace/{{PROJECT_DIR}}/{{this}}/node_modules
      {{/each}}
    ports:
      {{#each PORTS}}
      - "{{this}}:{{this}}"
      {{/each}}
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true
    working_dir: /workspace/{{PROJECT_DIR}}
    command: {{DEV_COMMAND}}

Template: setup.sh

模板:setup.sh

bash
#!/bin/bash
bash
#!/bin/bash

Setup script for devcontainer

Setup script for devcontainer

Fixes symlinks and installs dependencies

Fixes symlinks and installs dependencies

set -e
echo "Setting up devcontainer..."
set -e
echo "Setting up devcontainer..."

Install dependencies

Install dependencies

cd /workspace/{{PROJECT_DIR}} {{INSTALL_COMMAND}}
{{#if CLAUDE_CODE_SUPPORT}}
cd /workspace/{{PROJECT_DIR}} {{INSTALL_COMMAND}}
{{#if CLAUDE_CODE_SUPPORT}}

Install Claude Code CLI

Install Claude Code CLI

npm install -g @anthropic-ai/claude-code
npm install -g @anthropic-ai/claude-code

Fix Claude config symlinks to point to container paths

Fix Claude config symlinks to point to container paths

The host symlinks point to /Users/... which don't exist in container

The host symlinks point to /Users/... which don't exist in container

CLAUDE_DIR="/root/.claude"
CLAUDE_DIR="/root/.claude"

Find the library directory dynamically

Find the library directory dynamically

Check common locations: sibling directory, parent directory, or LIBRARY_PATH env var

Check common locations: sibling directory, parent directory, or LIBRARY_PATH env var

find_library() { # Check environment variable first if [ -n "$LIBRARY_PATH" ] && [ -d "$LIBRARY_PATH/agents/.claude" ]; then echo "$LIBRARY_PATH/agents/.claude" return fi
# Check /workspace/library (common devcontainer mount)
if [ -d "/workspace/library/agents/.claude" ]; then
    echo "/workspace/library/agents/.claude"
    return
fi

# Check sibling directories for a library folder
for dir in /workspace/*/agents/.claude; do
    if [ -d "$dir" ]; then
        echo "$dir"
        return
    fi
done

echo ""
}
LIBRARY_CLAUDE=$(find_library)
if [ -d "$CLAUDE_DIR" ] && [ -n "$LIBRARY_CLAUDE" ] && [ -d "$LIBRARY_CLAUDE" ]; then echo "Fixing Claude config symlinks..." echo "Library found at: $LIBRARY_CLAUDE"
# Remove broken symlinks and create new ones
for item in rules commands agents skills; do
    if [ -L "$CLAUDE_DIR/$item" ] || [ -e "$CLAUDE_DIR/$item" ]; then
        rm -f "$CLAUDE_DIR/$item"
    fi
    if [ -d "$LIBRARY_CLAUDE/$item" ]; then
        ln -sf "$LIBRARY_CLAUDE/$item" "$CLAUDE_DIR/$item"
        echo "  Linked $item -> $LIBRARY_CLAUDE/$item"
    fi
done
else echo "Note: Ship Shit Dev Library not found. Symlinks not configured." echo "Set LIBRARY_PATH environment variable to the library root if needed." fi {{/if}}
echo "Setup complete!" {{#if CLAUDE_CODE_SUPPORT}} echo "" echo "To use Claude Code, set your API key:" echo " export ANTHROPIC_API_KEY='your-key'" echo "" echo "Then run: claude" {{/if}}
undefined
find_library() { # Check environment variable first if [ -n "$LIBRARY_PATH" ] && [ -d "$LIBRARY_PATH/agents/.claude" ]; then echo "$LIBRARY_PATH/agents/.claude" return fi
# Check /workspace/library (common devcontainer mount)
if [ -d "/workspace/library/agents/.claude" ]; then
    echo "/workspace/library/agents/.claude"
    return
fi

# Check sibling directories for a library folder
for dir in /workspace/*/agents/.claude; do
    if [ -d "$dir" ]; then
        echo "$dir"
        return
    fi
done

echo ""
}
LIBRARY_CLAUDE=$(find_library)
if [ -d "$CLAUDE_DIR" ] && [ -n "$LIBRARY_CLAUDE" ] && [ -d "$LIBRARY_CLAUDE" ]; then echo "Fixing Claude config symlinks..." echo "Library found at: $LIBRARY_CLAUDE"
# Remove broken symlinks and create new ones
for item in rules commands agents skills; do
    if [ -L "$CLAUDE_DIR/$item" ] || [ -e "$CLAUDE_DIR/$item" ]; then
        rm -f "$CLAUDE_DIR/$item"
    fi
    if [ -d "$LIBRARY_CLAUDE/$item" ]; then
        ln -sf "$LIBRARY_CLAUDE/$item" "$CLAUDE_DIR/$item"
        echo "  Linked $item -> $LIBRARY_CLAUDE/$item"
    fi
done
else echo "Note: Ship Shit Dev Library not found. Symlinks not configured." echo "Set LIBRARY_PATH environment variable to the library root if needed." fi {{/if}}
echo "Setup complete!" {{#if CLAUDE_CODE_SUPPORT}} echo "" echo "To use Claude Code, set your API key:" echo " export ANTHROPIC_API_KEY='your-key'" echo "" echo "Then run: claude" {{/if}}
undefined

Template: README.md

模板:README.md

Generate a README.md that documents:
  • Quick start instructions (VS Code and Docker Compose methods)
  • Container name for docker commands
  • Mount paths table
  • Directory structure diagram
  • Port mappings table
  • Claude Code usage (if enabled)
  • Troubleshooting section
生成README.md文档,包含以下内容:
  • 快速开始说明(VS Code和Docker Compose两种方式)
  • Docker命令使用的容器名称
  • 挂载路径表格
  • 目录结构示意图
  • 端口映射表格
  • Claude Code使用说明(若启用)
  • 故障排除章节

Package Manager Reference

包管理器参考

Package ManagerLock FileInstall CommandDev Command
bun
bun.lock*
bun install --frozen-lockfile
bun run dev
npm
package-lock.json
npm ci
npm run dev
pnpm
pnpm-lock.yaml
pnpm install --frozen-lockfile
pnpm run dev
yarn
yarn.lock
yarn install --frozen-lockfile
yarn dev
包管理器锁文件安装命令开发命令
bun
bun.lock*
bun install --frozen-lockfile
bun run dev
npm
package-lock.json
npm ci
npm run dev
pnpm
pnpm-lock.yaml
pnpm install --frozen-lockfile
pnpm run dev
yarn
yarn.lock
yarn install --frozen-lockfile
yarn dev

Implementation Steps

实施步骤

  1. Ask the user the required questions above using AskUserQuestion
  2. Create the
    .devcontainer
    directory
  3. Generate each file with the gathered configuration
  4. Make
    setup.sh
    executable
  5. Provide summary of what was created and how to use it
  1. 使用AskUserQuestion向用户询问上述必要问题
  2. 创建
    .devcontainer
    目录
  3. 根据收集到的配置生成每个文件
  4. setup.sh
    添加可执行权限
  5. 说明已创建的内容及使用方法

Example Usage

使用示例

User: "Set up devcontainer for my Next.js project"
  1. Gather info: Project uses Bun, ports 3000, needs Claude Code support
  2. Create all 5 files in
    .devcontainer/
  3. Output: "Created devcontainer configuration. Open in VS Code and click 'Reopen in Container'."
用户:"为我的Next.js项目配置devcontainer"
  1. 收集信息:项目使用Bun,端口3000,需要Claude Code支持
  2. .devcontainer/
    目录中创建所有5个文件
  3. 输出:"已创建devcontainer配置。在VS Code中打开并点击‘在容器中重新打开’。"