Claude Dev Setup

Claude代码开发环境设置

为Claude Code设置一个全面的开发环境，包括MCP服务器、开发容器和长时间运行的作业功能。

🚀 快速开始

1. 克隆此存储库：

   git clone https://github.com/your-username/claude-dev-setup.git
   cd claude-dev-setup

1. 设置环境变量：

   cp .env.example .env
   # Edit .env with your API tokens

1. 启动开发容器：

   # Using VS Code Dev Containers extension
   code .
   # Or using Docker Compose directly
   docker-compose up -d

1. 初始化MCP服务器：

   ./.devcontainer/init-mcp.sh

1. 启动长时间运行的作业：

   ./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令牌

📦 安装

方法1:VS代码开发容器（推荐）

1. 克隆并在VS代码中打开：

   git clone https://github.com/your-username/claude-dev-setup.git
   cd claude-dev-setup
   code .

1. 出现提示时，单击“在容器中重新打开”

- VS Code将自动构建并启动开发容器 - 所有依赖项都将自动安装

1. 设置环境变量：

   cp .env.example .env
   # Edit .env with your API tokens

方法二：Docker编写

1. 克隆存储库：

   git clone https://github.com/your-username/claude-dev-setup.git
   cd claude-dev-setup

1. 配置环境：

   cp .env.example .env
   # Edit .env with your API tokens

1. 启动容器：

   docker-compose up -d

1. 进入集装箱：

   docker-compose exec claude-dev zsh

方法3：就地安装

如果您更喜欢在没有容器的情况下运行：

1. 安装Node.js依赖项：

   npm install -g \
     @anthropic-ai/claude-code \
     @modelcontextprotocol/server-filesystem \
     @mondaydotcomorg/monday-api-mcp \
     @playwright/mcp \
     figma-developer-mcp

1. 设置环境：

   cp .env.example .env
   source .env

1. 运行初始化脚本：

   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=8192

MCP服务器配置

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

开发工作流程

1. 启动开发环境：

   # Open in VS Code
   code .
   # Or start container manually
   docker-compose up -d

1. 初始化您的项目：

   # Create new project
   mkdir my-project && cd my-project
   npm init -y

   # Start Claude Code
   claude-code --dangerously-skip-permissions

1. 运行长时间运行的分析：

   ./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
"

📚 文档

• MCP设置指南 -详细的MCP服务器配置
• 长期工作 -作业管理和监控
• 开发容器指南 -容器配置详细信息
• 故障排除指南 -常见问题和解决方案

🔍 监控与调试

检查系统状态

# 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 -d

MCP服务器不工作

# 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

获取帮助

1. 检查日志 有关特定错误消息
2. 审查文件 在 docs/ 目录
3. 搜索问题 在GitHub存储库中
4. 创建问题 与：

- 错误消息 - 重现步骤 - 环境详细信息(docker version, node --version)

🔒 安全考虑

• API令牌：存储在 .env 文件，从不提交到存储库
• 权限：使用 --dangerously-skip-permissions 仅在受信任的环境中
• 网络：防火墙规则是自动配置的
• 容器：默认情况下使用非root用户运行

🤝 贡献

1. 分叉存储库
2. 创建要素分支： git checkout -b feature/amazing-feature
3. 进行更改 并进行彻底测试
4. 提交您的更改： git commit -m 'Add amazing feature'
5. 推到分支： git push origin feature/amazing-feature
6. 打开拉取请求

开发指南

• 遵循现有的代码风格和约定
• 为新功能添加文档
• 在容器和本地环境中测试更改
• 更新相关文档文件

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

• Anthropic 用于Claude Code和MCP协议
• 微软 用于VS代码开发容器
• 码头工人 集装箱化平台
• 社区贡献者 改进和反馈

📞 支持

• 文档：检查 docs/ 目录
• 问题:
• 讨论:

______________________________________________________________________

与Claude一起编程快乐！ 🎉