Claude代码开发环境设置
为Claude Code设置一个全面的开发环境，包括MCP服务器、开发容器和长时间运行的作业功能。
🚀 快速开始
- 克隆此存储库：
git clone https://github.com/your-username/claude-dev-setup.git
cd claude-dev-setup- 设置环境变量：
cp .env.example .env
# Edit .env with your API tokens- 启动开发容器：
# Using VS Code Dev Containers extension
code .
# Or using Docker Compose directly
docker-compose up -d- 初始化MCP服务器：
./.devcontainer/init-mcp.sh- 启动长时间运行的作业：
./scripts/ten-minute-job.sh📋 目录
✨ 特性
开发环境
- VS代码开发容器 具有预配置的扩展
- 基于Docker 孤立的开发环境
- Zsh与Oh My Zsh 增强终端体验
- Git增量 为了更好地显示差异
MCP（模型上下文协议）服务器
- 文件系统服务器：文件操作和项目管理
- Monday.com集成：项目管理和任务跟踪
- Figma集成：设计系统访问和组件管理
- 剧作家整合：浏览器自动化和测试
长期工作
- 自动延续：跨会话持续的作业
- 监控：实时进度跟踪
- 日志记录：全面的作业记录和分析
- 模板：为常见任务预先构建的作业模板
安全与网络
- 防火墙配置：自动网络安全设置
- 权限管理：对系统资源的受控访问
- 许可证管理：安全处理API凭据
🔧 先决条件
- Docker桌面 或 Docker引擎 Docker Compose
- VS代码 带有Dev容器扩展（推荐）
- Git 用于版本控制
- Node.js 20+ （包含在容器中）
必需的API令牌
| 服务 | 必需 | 目的 | 如何获得 |
|---|---|---|---|
| GitHub | ✅ 是 | 存储库操作 | |
| Monday.com⚪ 可选 | 项目管理 | Monday.com→ 管理员→ API | |
| Figma | ⚪ 可选 | 设计系统访问 | Figma→ 设置→ 账户→ 个人访问令牌 |
📦 安装
方法1:VS代码开发容器（推荐）
- 克隆并在VS代码中打开：
git clone https://github.com/your-username/claude-dev-setup.git
cd claude-dev-setup
code .- 出现提示时，单击“在容器中重新打开”
- VS Code将自动构建并启动开发容器 - 所有依赖项都将自动安装
- 设置环境变量：
cp .env.example .env
# Edit .env with your API tokens方法二：Docker编写
- 克隆存储库：
git clone https://github.com/your-username/claude-dev-setup.git
cd claude-dev-setup- 配置环境：
cp .env.example .env
# Edit .env with your API tokens- 启动容器：
docker-compose up -d- 进入集装箱：
docker-compose exec claude-dev zsh方法3：就地安装
如果您更喜欢在没有容器的情况下运行：
- 安装Node.js依赖项：
npm install -g \
@anthropic-ai/claude-code \
@modelcontextprotocol/server-filesystem \
@mondaydotcomorg/monday-api-mcp \
@playwright/mcp \
figma-developer-mcp- 设置环境：
cp .env.example .env
source .env- 运行初始化脚本：
chmod +x .devcontainer/*.sh scripts/*.sh
./.devcontainer/init-mcp.sh⚙️ 配置
环境变量
编辑 .env 使用您的配置文件：
# Required: GitHub Personal Access Token
GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
# Optional: Monday.com API token
MONDAY_API_TOKEN=your_monday_token_here
# Optional: Figma API token
FIGMA_TOKEN=your_figma_token_here
# Optional: Timezone (defaults to UTC)
TZ=America/New_York
# Optional: Node.js memory limit
NODE_OPTIONS=--max-old-space-size=8192MCP服务器配置
MCP服务器在容器启动期间自动配置。要手动配置，请执行以下操作：
# Add MCP servers to Claude
claude mcp add filesystem "npx @modelcontextprotocol/server-filesystem /workspace"
claude mcp add monday "npx @mondaydotcomorg/monday-api-mcp --token $MONDAY_API_TOKEN"
claude mcp add playwright "npx @playwright/mcp"
claude mcp add figma "npx figma-developer-mcp --figma-api-key=$FIGMA_TOKEN --stdio"
# Verify configuration
claude mcp list🎯 用法
快速命令
# Start MCP servers
./.devcontainer/start-mcps.sh
# Run a 10-minute demo job
./scripts/ten-minute-job.sh
# Start custom long-running job
./scripts/run-long-claude-job.sh "Your task description"
# Monitor job progress
./scripts/monitor-job.sh /workspace/claude-job-*.log
# Check system status
docker-compose ps
ps aux | grep claude开发工作流程
- 启动开发环境：
# Open in VS Code
code .
# Or start container manually
docker-compose up -d- 初始化您的项目：
# Create new project
mkdir my-project && cd my-project
npm init -y
# Start Claude Code
claude-code --dangerously-skip-permissions- 运行长时间运行的分析：
./scripts/ten-minute-job.sh
# Monitor in another terminal
tail -f /workspace/claude-job-*.log作业模板
代码分析
./scripts/run-long-claude-job.sh "
Perform comprehensive code analysis:
1. Review all components for performance issues
2. Identify security vulnerabilities
3. Suggest architectural improvements
4. Generate detailed report with recommendations
"文档生成
./scripts/run-long-claude-job.sh "
Create comprehensive documentation:
1. Add JSDoc comments to all functions
2. Create API documentation
3. Write usage examples for components
4. Generate architecture diagrams
"测试设置
./scripts/run-long-claude-job.sh "
Set up comprehensive testing infrastructure:
1. Configure Jest and testing libraries
2. Create test files for existing components
3. Set up E2E testing with Playwright
4. Add test coverage reporting
"📚 文档
🔍 监控与调试
检查系统状态
# Container status
docker-compose ps
# MCP server status
ps aux | grep mcp
# Claude processes
ps aux | grep claude
# Resource usage
docker stats日志文件
# MCP server logs
tail -f /tmp/mcp-server.log
tail -f /tmp/monday-mcp.log
tail -f /tmp/figma-mcp.log
tail -f /tmp/playwright-mcp.log
# Job logs
tail -f /workspace/claude-job-*.log
# Container logs
docker-compose logs -f claude-dev健康检查
# Test MCP connections
claude mcp test filesystem
claude mcp test monday
claude mcp test playwright
claude mcp test figma
# Network connectivity
ping github.com
curl -I https://api.monday.com🐛 故障排除
常见问题
容器无法启动
# Check Docker daemon
docker version
# Check disk space
df -h
# Rebuild container
docker-compose down
docker-compose build --no-cache
docker-compose up -dMCP服务器不工作
# Restart MCP servers
pkill -f mcp
./.devcontainer/init-mcp.sh
# Check environment variables
echo $MONDAY_API_TOKEN
echo $FIGMA_TOKEN
# Verify installations
npm list -g | grep mcp长期工作失败
# Check Claude authentication
claude-code --version
# Verify permissions
ls -la /workspace
# Check available memory
free -m
# Review error logs
grep -i error /workspace/claude-job-*.log获取帮助
- 检查日志 有关特定错误消息
- 审查文件 在
docs/目录 - 搜索问题 在GitHub存储库中
- 创建问题 与：
- 错误消息 - 重现步骤 - 环境详细信息(docker version, node --version)
🔒 安全考虑
- API令牌：存储在
.env文件，从不提交到存储库 - 权限：使用
--dangerously-skip-permissions仅在受信任的环境中 - 网络：防火墙规则是自动配置的
- 容器：默认情况下使用非root用户运行
🤝 贡献
- 分叉存储库
- 创建要素分支：
git checkout -b feature/amazing-feature - 进行更改 并进行彻底测试
- 提交您的更改：
git commit -m 'Add amazing feature' - 推到分支：
git push origin feature/amazing-feature - 打开拉取请求
开发指南
- 遵循现有的代码风格和约定
- 为新功能添加文档
- 在容器和本地环境中测试更改
- 更新相关文档文件
📄 许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
🙏 致谢
- Anthropic 用于Claude Code和MCP协议
- 微软 用于VS代码开发容器
- 码头工人 集装箱化平台
- 社区贡献者 改进和反馈
📞 支持
- 文档：检查
docs/目录 - 问题:
- 讨论:
______________________________________________________________________
与Claude一起编程快乐！ 🎉