yuxuanhui
91861565bb
- Introduced API guidelines for interface contracts and request handling. - Added design tokens usage guidelines for consistent styling across the project. - Established DTO guidelines for defining request parameters and response data types. - Created frontend structure guidelines to clarify directory organization and code placement rules. - Compiled a comprehensive frontend development guideline document covering various aspects of the development process. - Implemented quality guidelines to ensure code maintainability and adherence to best practices.
2.2 KiB
2.2 KiB
前端质量规范
前端代码质量、可维护性与交付前检查规范。
必须遵守
- 页面主文件聚焦页面组装,复杂逻辑下沉到
components/、hooks/、utils/ - 目录与命名遵循
frontend-structure-guidelines.md约定 - 接口层、页面层、公共层职责明确,不交叉污染
- 新增类型、常量、工具函数前先搜索是否已有可复用实现
- 公共组件保持通用,页面私有组件就近放置
禁止行为
- 页面直接内联大段请求逻辑,绕过
api/或页面私有接口文件 - 本应页面私有的组件、Hooks、工具函数被随意放进全局公共目录
- 组件 Props、接口返回值、Hook 返回值大量使用
any - 在组件渲染过程中执行复杂计算、重复格式化、重复创建临时对象而不做整理
- 一个页面目录里同时堆放列表、详情、弹窗、表单等多种耦合逻辑却不拆分
- 把样式、请求、副作用、状态管理全部写进一个超大组件
GIT提交规范
- 所有AI生成的代码提交必须在Git commit message中标识AI模型名称,格式为
[AI-{模型名称}],例如[AI-Qoder] 添加用户列表页面
测试要求
至少需要验证:
- 页面能正常渲染,关键交互路径不报错
- 新增或修改的接口调用参数、返回值与页面消费逻辑一致
- 条件渲染、空态、加载态、异常态至少人工验证一遍
- 抽取出的工具函数、格式化函数、状态转换函数应补单元测试(如果项目已具备测试设施)
- 改动公共组件或公共 Hook 时,要确认现有调用方未被破坏
如果项目暂时没有完整测试设施,至少保证能通过构建,并完成核心路径的本地人工验证。
代码审查清单
- 这个改动是否放在了正确目录,而不是图省事塞进页面主文件?
- 新增公共能力之前,是否确认过它不是页面私有逻辑?
- 是否存在命名模糊、职责混乱、目录层级不清的问题?
- 接口、类型、组件、Hooks 之间的数据流是否清晰可读?
- 是否引入了重复实现,本可以复用已有工具或组件?
- 构建、类型检查、本地页面验证是否已经完成?