开发指南
VibeCLI 最佳实践
遵循这些最佳实践，构建高质量、可维护、高性能的项目。从项目结构到部署优化，全面提升开发效率。
开始新项目时
- 选择合适的项目模板
- 配置TypeScript和ESLint
- 设置Git工作流
- 建立基础目录结构
开发过程中
- 经常提交代码，写清晰的commit信息
- 定期重构和优化代码
- 保持代码风格一致性
- 及时编写和更新文档
发布前检查
- 运行完整的测试套件
- 检查安全配置
- 优化性能指标
- 验证所有功能正常
项目结构设计
合理的项目结构提升代码可维护性
模块化组织必须
按功能模块组织代码，保持清晰的目录结构
推荐做法
使用 /components、/pages、/utils 等标准目录
将相关功能聚合在同一模块中
避免深层嵌套，保持目录层级不超过3层
避免做法
所有组件放在单一目录下
按文件类型而非功能组织
混合业务逻辑和展示组件
命名规范必须
统一的命名规范提升代码可读性
推荐做法
组件使用 PascalCase (UserProfile.tsx)
文件夹使用 kebab-case (user-profile/)
函数和变量使用 camelCase (getUserData)
避免做法
混合使用不同命名风格
使用缩写或模糊的名称
名称过长或过短
代码质量
编写高质量、可维护的代码
TypeScript使用必须
充分利用TypeScript的类型系统
推荐做法
为所有函数参数和返回值定义类型
使用interface定义对象结构
启用strict模式增强类型检查
避免做法
过度使用any类型
忽略TypeScript错误
不为复杂对象定义类型
函数设计推荐
编写简洁、单一职责的函数
推荐做法
函数保持在30行以内
每个函数只做一件事
使用纯函数避免副作用
避免做法
函数过长，逻辑复杂
函数承担多个职责
直接修改传入的参数
性能优化
优化应用性能和用户体验
组件优化推荐
合理使用React性能优化技术
推荐做法
使用React.memo包装纯组件
用useCallback和useMemo缓存重量级计算
实现虚拟滚动处理大列表
避免做法
过度使用memo导致内存浪费
在render函数中进行复杂计算
不合理的state更新导致重复渲染
资源加载必须
优化静态资源加载策略
推荐做法
使用Next.js Image组件优化图片
实现代码分割和懒加载
配置合适的缓存策略
避免做法
加载未优化的大尺寸图片
同步加载所有JavaScript代码
缺少压缩和缓存设置
安全配置
确保应用安全性和数据保护
API安全必须
保护API接口和数据传输
推荐做法
使用HTTPS加密所有数据传输
实现JWT token认证机制
添加API频率限制防止滥用
避免做法
在客户端存储敏感信息
使用HTTP传输敏感数据
缺少输入验证和过滤
数据保护必须
保护用户数据和隐私
推荐做法
加密存储敏感数据
实现数据备份和恢复
遵循GDPR等数据保护法规
避免做法
明文存储密码
收集不必要的用户数据
缺少数据删除机制
测试策略
建立完善的测试体系
单元测试必须
为核心逻辑编写单元测试
推荐做法
测试覆盖率保持在80%以上
使用Jest和React Testing Library
模拟外部依赖和API调用
避免做法
只测试简单函数忽略复杂逻辑
测试实现细节而非行为
缺少边界条件测试
集成测试推荐
测试组件间的交互
推荐做法
测试用户完整操作流程
验证API集成正确性
检查页面路由和状态管理
避免做法
只依赖单元测试
测试用例过于复杂
忽略异步操作测试
部署优化
高效的部署和运维策略
CI/CD配置推荐
自动化构建、测试和部署流程
推荐做法
使用GitHub Actions或类似工具
在部署前运行自动化测试
实现多环境部署策略
避免做法
手动部署容易出错
跳过测试直接部署
生产和开发环境配置相同
监控运维必须
监控应用性能和错误
推荐做法
集成错误监控工具
设置性能指标告警
建立日志分析系统
避免做法
缺少错误监控
忽略性能指标
没有日志记录策略