用于用户请求一般前端代码审查、PR审查、合流准备评估、架构可维护性、类型安全、渲染/状态等
前端代码评审
功能概述
前端代码评审是一项面向实际任务的技能，主要用于Purpose；从架构、类型安全、可访问性、样式一致性、性能和可测试性等 8 个维度审查前端代码质量，输出分级评审报告；
核心要点
- Review Process；
- 先读项目事实：package scripts、框架、目录约定、最近 diff、现有测试和相关规则；
- 按风险找问题，而不是按个人偏好挑风格；
使用与执行
每个发现都要能指向具体文件、行号和用户影响；用五轴收敛结论：正确性、可维护性、类型/接。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
结果检查与注意事项
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
前端代码评审
Purpose
从架构、类型安全、可访问性、样式一致性、性能和可测试性等 8 个维度审查前端代码质量，输出分级评审报告。
Review Process
- 先读项目事实：package scripts、框架、目录约定、最近 diff、现有测试和相关规则。
- 按风险找问题，而不是按个人偏好挑风格；每个发现都要能指向具体文件、行号和用户影响。
- 用五轴收敛结论：正确性、可维护性、类型/接口、用户体验、验证覆盖。
- 对安全、无障碍、E2E、性能等深水区只做初筛；需要专项调查时明确分流。
- 多维评审时先按职责拆分，再合并同类发现；同一文件同一根因只保留一条主发现，避免重复噪声。
- 报告先列阻塞问题，再列建议项；没有证据的问题不要写成确定结论。
多维评审编排
当改动跨越多个质量维度时，按“主评审 + 专项分流”组织，而不是让所有维度重复检查同一处代码。
| 维度 | 触发条件 | 分流边界 |
|---|---|---|
| TypeScript 类型安全 | DTO、泛型、公共类型、类型守卫、any、断言 |
深入类型建模交给类型安全专项流程 |
| 状态管理 | 状态归属、全局 store、URL 状态、派生状态、跨页面同步 | 状态选型与迁移交给状态管理专项流程 |
| 安全 | 用户输入、HTML 渲染、token、上传、第三方脚本 | 漏洞级分析交给安全专项流程 |
| 无障碍 | 弹窗、菜单、表单、键盘操作、焦点管理 | WCAG 细查交给无障碍专项流程 |
| 性能 | 大列表、重依赖、重复请求、长任务、包体积 | 性能证据与预算交给性能专项流程 |
| E2E | 关键用户路径、登录态、支付、跨页面流程 | 浏览器用例与 trace 交给 E2E 专项流程 |
发现合并规则：
- 同一根因出现在多个维度时，只保留最高严重级别，并在
Dimension中列出相关维度。 - 同一文件多处重复模式，合并为一条模式级发现，列出代表性位置。
- 置信度不足的问题放入 Open Questions，不升级为阻塞项。
- 自动化可稳定捕获的格式问题交给 lint/format，不作为人工评审主发现。
评审维度
- 架构
- 组件边界是否清晰
- 展示逻辑与业务逻辑是否分离
- 是否有可复用抽象
- 是否存在上帝组件
- 类型安全
- 是否存在不必要的
any - props 类型是否明确
- hooks/composables 返回值是否稳定
- 在可行情况下 API 契约是否有类型约束
- 渲染与状态
- 是否存在不必要的重复渲染
- key 的使用是否稳定
- 可推导状态是否被重复存储
- 本地状态是否耦合过深
- 全局 store 是否只保存真正跨边界共享的客户端状态
- URL 状态、服务端状态、表单状态和浏览器持久化是否边界清晰
- 样式
- 已有 Token 时是否还在使用 magic number
- 类名是否与仓库约定一致
- 响应式处理是否明确
- 是否无必要地混用了多套样式体系
- 可访问性
- 语义结构是否合理
- 是否在需要时正确使用 label 和 aria
- 是否支持键盘操作
- 浮层和菜单的焦点管理是否正确
- 可维护性
- 组件/页面文件规模是否合理（宜约 300 行内；逾 500 行或复杂度过高须拆分，见共享 React / Vue 规则中的「组件文件规模」）
- 命名质量是否良好
- 是否有应该提取的重复逻辑
- 是否存在死代码、过期注释或临时性 hack
- 业务状态、类型、标识是否用裸数字/裸字符串（应对齐
templates/shared/rules/fec-typescript.md「禁止 Magic Number / Magic String」）
- 测试
- 是否缺少关键测试覆盖
- 是否存在脆弱的选择器或不稳定的测试模式
- 安全
- 无明显 XSS 风险（dangerouslySetInnerHTML / v-html 必须审查）
- 无敏感信息硬编码
- 无未校验的用户输入直接渲染
- 性能与体验证据
- 是否引入首屏重依赖、重复请求、大列表渲染或长任务
- loading、empty、error、disabled、focus 等状态是否完整
- 响应式布局是否有可验证断点和文本溢出保护
- 必检项（阻塞合并）
- TypeScript 类型完整，无
any - 外部输入、DTO、公共类型边界无无守卫断言
- 无 XSS 风险
- 无敏感信息硬编码
- 核心逻辑有单元测试
- 质量项（建议修改）
- 组件文件规模符合约定（约 300 行内为佳；逾 500 行或高复杂度已拆子组件 / Hooks / Composables / utils）
- 无重复代码（DRY 原则）
- 无未使用的 import
- 规范项（风格建议）
- 命名语义清晰
- 注释覆盖复杂逻辑
Detailed References
撰写代码评审报告时，加载 references/report-template.md。发现必须具体且可操作；不要写"优化性能"等空泛建议而不指出具体代码模式。
Expected Output
- 分级评审报告（CRITICAL / HIGH / MEDIUM / LOW）
- 每个问题关联具体文件和行号，附修复建议
- 阻塞项（CRITICAL）修复前不建议合并
- 评审报告保存为
reports/code-review-YYYY-MM-DD-HHmmss.md - 多维评审要合并重复发现，并说明已分流到哪些专项能力
- 对不确定项标注需要的验证命令或补充上下文，不把猜测写成事实
热门AI工具
相关专题
本专题从实际API接口调试场景出发，讲解Postman身份认证的完整配置流程，包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查，帮助用户正确完成接口授权与访问验证。
0
2026.11.06
围绕Postman HTTP请求头配置展开，讲解Headers选项的具体使用方式，包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法，帮助用户解决接口调试过程中遇到的请求头配置问题。
0
2026.11.06
详细介绍Postman接口请求的创建与发送方法，涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看，帮助用户掌握Postman接口请求的完整操作流程。
0
2026.11.06
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
0
2026.11.05
DBeaver安全防护专题，围绕数据库连接安全、账号密码保护和访问权限管理展开，整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法，同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项，帮助用户提高数据库日常管理的安全性。
0
2026.11.05
本专题聚焦DBeaver数据库连接配置与管理，覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库，整理相应的连接设置方法，并提供驱动缺失、认证失败和连接异常等问题的排查方向。
0
2026.11.04
本专题围绕XORM框架的结构体映射展开，说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充，并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.8万人学习
共6课时 | 54.7万人学习
最新文章
