VS Code Dev Container 一键配置指南：支持 Docker、Claude Code 与多语言开发环境

devcontainer-setup by shipshitdev/library

87 周安装量

19 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/shipshitdev/library --skill devcontainer-setup

开发运维 VSCode Docker

🇨🇳中文介绍

Devcontainer 设置技能

设置一个完整的 VS Code Dev Container 配置，支持 Docker 和 Claude Code CLI。

信息收集

在创建 devcontainer 之前，从用户处收集以下信息：

必需信息

项目名称：项目/容器名称是什么？（例如：my-project、shipshitdev-api）
基础镜像：该项目使用什么运行时环境？
- oven/bun:1.3.5 - Bun 项目（推荐，速度更快）
- node:20-slim - Node.js 项目
- node:20 - 包含更多工具的 Node.js
- 自定义镜像路径
包管理器：使用哪个包管理器？
- bun - Bun（Bun 项目的默认选择）

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

要创建的文件结构

.devcontainer/
├── devcontainer.json      # VS Code 开发容器配置
├── Dockerfile             # 容器镜像定义
├── docker-compose.yml     # Docker compose 配置
├── setup.sh               # 创建后设置脚本
└── README.md              # 文档

模板：devcontainer.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
}

# {{PROJECT_NAME}} 的开发容器
FROM {{BASE_IMAGE}}

WORKDIR /workspace/{{PROJECT_DIR}}

# 安装依赖项
COPY package.json {{LOCK_FILE}} {{ADDITIONAL_CONFIG_FILES}} ./
{{#if MONOREPO_DIRS}}
{{#each MONOREPO_DIRS}}
COPY {{this}} ./{{this}}
{{/each}}
{{/if}}

RUN {{INSTALL_COMMAND}}

# 安装有用的开发工具
RUN apt-get update && apt-get install -y \
    git \
    curl \
    vim \
    nano \
    && rm -rf /var/lib/apt/lists/*

# 暴露端口
EXPOSE {{PORTS}}

CMD ["sleep", "infinity"]

模板：docker-compose.yml

version: '3.8'

services:
  {{SERVICE_NAME}}:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    container_name: {{PROJECT_NAME}}
    volumes:
      # 挂载整个父文件夹以实现跨仓库访问（如果启用）
      - ../..:/workspace
      # 挂载主机 Claude 配置
      - ~/.claude:/root/.claude
      # 在容器中保留 node_modules（性能）
      - /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}}

#!/bin/bash
# devcontainer 的设置脚本
# 修复符号链接并安装依赖项

set -e

echo "正在设置 devcontainer..."

# 安装依赖项
cd /workspace/{{PROJECT_DIR}}
{{INSTALL_COMMAND}}

{{#if CLAUDE_CODE_SUPPORT}}
# 安装 Claude Code CLI
npm install -g @anthropic-ai/claude-code

# 修复 Claude 配置符号链接以指向容器路径
# 主机的符号链接指向 /Users/...，这在容器中不存在
CLAUDE_DIR="/root/.claude"

# 动态查找库目录
# 检查常见位置：同级目录、父目录，或 LIBRARY_PATH 环境变量
find_library() {
    # 首先检查环境变量
    if [ -n "$LIBRARY_PATH" ] && [ -d "$LIBRARY_PATH/agents/.claude" ]; then
        echo "$LIBRARY_PATH/agents/.claude"
        return
    fi

    # 检查 /workspace/library（常见的 devcontainer 挂载点）
    if [ -d "/workspace/library/agents/.claude" ]; then
        echo "/workspace/library/agents/.claude"
        return
    fi

    # 检查同级目录中是否有 library 文件夹
    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 "正在修复 Claude 配置符号链接..."
    echo "在以下位置找到库：$LIBRARY_CLAUDE"

    # 移除损坏的符号链接并创建新的
    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 "  已链接 $item -> $LIBRARY_CLAUDE/$item"
        fi
    done
else
    echo "注意：未找到 Ship Shit Dev 库。未配置符号链接。"
    echo "如果需要，请将 LIBRARY_PATH 环境变量设置为库的根目录。"
fi
{{/if}}

echo "设置完成！"
{{#if CLAUDE_CODE_SUPPORT}}
echo ""
echo "要使用 Claude Code，请设置您的 API 密钥："
echo "  export ANTHROPIC_API_KEY='your-key'"
echo ""
echo "然后运行：claude"
{{/if}}

生成一个 README.md 文档，内容包括：

快速入门说明（VS Code 和 Docker Compose 方法）
用于 docker 命令的容器名称
挂载路径表
目录结构图
端口映射表
Claude Code 用法（如果启用）
故障排除部分

包管理器	锁文件	安装命令	开发命令
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`

使用 AskUserQuestion 向用户询问上述必需问题
创建 .devcontainer 目录
使用收集到的配置生成每个文件
使 setup.sh 可执行
提供创建内容的摘要以及如何使用它

用户："为我的 Next.js 项目设置 devcontainer"

收集信息：项目使用 Bun，端口 3000，需要 Claude Code 支持
在 .devcontainer/ 中创建所有 5 个文件
输出："已创建 devcontainer 配置。在 VS Code 中打开并点击 '在容器中重新打开'。"

🇺🇸English

Devcontainer Setup Skill

Set up a complete VS Code Dev Container configuration with Docker and Claude Code CLI support.

Information Gathering

Before creating the devcontainer, gather the following information from the user:

Required Information

Project Name : What is the project/container name? (e.g., my-project, shipshitdev-api)
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
Package Manager : Which package manager?
- bun - Bun (default for Bun projects)
- npm - npm
- pnpm - pnpm
- yarn - Yarn
Ports : What ports need to be forwarded? (comma-separated, e.g., 3000, 3001, 5432)
Port Labels (optional): Labels for each port (e.g., 3000=Web, 5432=Postgres)
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
Claude Code Support : Include Claude Code CLI setup?
- Yes - Install Claude Code and fix symlinks for container use
- No - Skip Claude Code setup
VS Code Extensions (optional): Additional extensions to install (comma-separated extension IDs)
Monorepo Structure (if applicable):
- Is this a monorepo with nested package.json files?
- What are the app/package directories? (e.g., 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

Template: devcontainer.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
}

Template: Dockerfile

# Development container for {{PROJECT_NAME}}
FROM {{BASE_IMAGE}}

WORKDIR /workspace/{{PROJECT_DIR}}

# Install dependencies
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
RUN apt-get update && apt-get install -y \
    git \
    curl \
    vim \
    nano \
    && rm -rf /var/lib/apt/lists/*

# Expose ports
EXPOSE {{PORTS}}

CMD ["sleep", "infinity"]

Template: docker-compose.yml

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

#!/bin/bash
# Setup script for devcontainer
# Fixes symlinks and installs dependencies

set -e

echo "Setting up devcontainer..."

# Install dependencies
cd /workspace/{{PROJECT_DIR}}
{{INSTALL_COMMAND}}

{{#if CLAUDE_CODE_SUPPORT}}
# Install Claude Code CLI
npm install -g @anthropic-ai/claude-code

# Fix Claude config symlinks to point to container paths
# The host symlinks point to /Users/... which don't exist in container
CLAUDE_DIR="/root/.claude"

# Find the library directory dynamically
# 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}}

Template: 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

Package Manager Reference

Package Manager	Lock File	Install Command	Dev Command
bun	`bun.lock*`	`bun install --frozen-lockfile`	`bun run dev`
npm	`package-lock.json`	`npm ci`	`npm run dev`
pnpm	`pnpm-lock.yaml`

Implementation Steps

Ask the user the required questions above using AskUserQuestion
Create the .devcontainer directory
Generate each file with the gathered configuration
Make setup.sh executable
Provide summary of what was created and how to use it

Example Usage

User: "Set up devcontainer for my Next.js project"

Gather info: Project uses Bun, ports 3000, needs Claude Code support
Create all 5 files in .devcontainer/
Output: "Created devcontainer configuration. Open in VS Code and click 'Reopen in Container'."

Weekly Installs

Repository

shipshitdev/library

GitHub Stars

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

opencode62

codex60

claude-code59

gemini-cli59

github-copilot53

cursor51

Azure 升级评估与自动化工具 - 轻松迁移 Functions 计划、托管层级和 SKU

104,900 周安装

VS Code Dev Container 一键配置指南：支持 Docker、Claude Code 与多语言开发环境

🇨🇳中文介绍

Devcontainer 设置技能

信息收集

必需信息

相关 Skills

要创建的文件结构

模板：devcontainer.json

模板：Dockerfile

模板：docker-compose.yml

模板：setup.sh

模板：README.md

包管理器参考

实施步骤

使用示例

每周安装次数

仓库

GitHub 星标数

首次出现时间

安全审计

安装于