devcontainer-setup
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDevcontainer 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
必要信息
-
Project Name: What is the project/container name? (e.g.,,
my-project)shipshitdev-api -
Base Image: What runtime does this project use?
- - Bun projects (recommended for speed)
oven/bun:1.3.5 - - Node.js projects
node:20-slim - - Node.js with more tools
node:20 - Custom image path
-
Package Manager: Which package manager?
- - Bun (default for Bun projects)
bun - - 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 (good for monorepos, shared libraries)
/workspace - No - Only mount this project
- Yes - Mount parent as
-
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/*
-
项目名称:项目/容器的名称是什么?(例如:、
my-project)shipshitdev-api -
基础镜像:该项目使用什么运行时?
- - Bun项目(推荐用于提升速度)
oven/bun:1.3.5 - - Node.js项目
node:20-slim - - 附带更多工具的Node.js项目
node:20 - 自定义镜像路径
-
包管理器:使用哪种包管理器?
- - Bun(Bun项目默认选项)
bun - - npm
npm - - pnpm
pnpm - - Yarn
yarn
-
端口:需要转发哪些端口?(逗号分隔,例如:)
3000, 3001, 5432 -
端口标签(可选):每个端口的标签(例如:)
3000=Web, 5432=Postgres -
父目录挂载:是否需要挂载父目录以实现跨仓库访问?
- 是 - 将父目录挂载为(适用于单体仓库、共享库)
/workspace - 否 - 仅挂载当前项目
- 是 - 将父目录挂载为
-
Claude Code支持:是否包含Claude Code CLI配置?
- 是 - 安装Claude Code并修复容器使用的符号链接
- 否 - 跳过Claude Code配置
-
VS Code扩展(可选):需要安装的额外扩展(逗号分隔的扩展ID)
-
单体仓库结构(如适用):
- 这是否是包含嵌套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
undefineddockerfile
undefinedDevelopment 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/*
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/*
git
curl
vim
nano
&& rm -rf /var/lib/apt/lists/*
Expose ports
Expose ports
EXPOSE {{PORTS}}
CMD ["sleep", "infinity"]
undefinedEXPOSE {{PORTS}}
CMD ["sleep", "infinity"]
undefinedTemplate: 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/bashbash
#!/bin/bashSetup 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
doneelse
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}}
undefinedfind_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
doneelse
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}}
undefinedTemplate: 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 Manager | Lock File | Install Command | Dev Command |
|---|---|---|---|
| bun | | | |
| npm | | | |
| pnpm | | | |
| yarn | | | |
| 包管理器 | 锁文件 | 安装命令 | 开发命令 |
|---|---|---|---|
| bun | | | |
| npm | | | |
| pnpm | | | |
| yarn | | | |
Implementation Steps
实施步骤
- Ask the user the required questions above using AskUserQuestion
- Create the directory
.devcontainer - Generate each file with the gathered configuration
- Make executable
setup.sh - Provide summary of what was created and how to use it
- 使用AskUserQuestion向用户询问上述必要问题
- 创建目录
.devcontainer - 根据收集到的配置生成每个文件
- 为添加可执行权限
setup.sh - 说明已创建的内容及使用方法
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'."
用户:"为我的Next.js项目配置devcontainer"
- 收集信息:项目使用Bun,端口3000,需要Claude Code支持
- 在目录中创建所有5个文件
.devcontainer/ - 输出:"已创建devcontainer配置。在VS Code中打开并点击‘在容器中重新打开’。"