| name | frontend-lint-fix |
| description | 前端代码门禁:一键修复 TypeScript 编译错误。Use when: 前端报错、tsc 编译失败、TypeScript errors、lint fix、compile errors、修复报错、代码门禁、type check。 |
| argument-hint | 可选:指定要检查的目录,默认 chat-app/frontend/src |
前端代码门禁 — 一键修复
自动检测并修复前端 TypeScript 编译错误,确保代码能通过 tsc --noEmit。
适用场景
- 批量修复 TypeScript 编译报错
- 新增代码后的门禁检查
- CI 前的本地预检
执行流程
1. 收集错误
使用 get_errors 工具获取 chat-app/frontend/src 下所有编译错误。若用户指定了其他目录则检查该目录。
同时在终端运行确认:
cd chat-app/frontend && npx tsc --noEmit 2>&1
2. 分类错误
按以下常见类别归类,优先修复根因(靠前的类别会引发级联错误):
| 优先级 | 错误类型 | 典型信息 | 修复方式 |
|---|
| P0 | 缺少依赖包 | Cannot find module '@xxx' (node_modules) | pnpm add [-D] <pkg> |
| P1 | useRef 初始值缺失 | Expected 1 arguments, but got 0 on useRef | 添加 undefined 作为初始参数:useRef<T>(undefined) |
| P2 | 缺少 import | Cannot find name 'xxx' | 在文件顶部添加正确的 import 语句 |
| P3 | 模块找不到(本地文件) | Cannot find module './xxx' (文件确实存在) | 重启 TS Server(typescript.restartTsServer),或检查路径拼写 |
| P4 | 隐式 any 类型 | Parameter 'x' implicitly has an 'any' type | 通常是级联错误,修复根因后自动消失;若非级联则显式标注类型 |
| P5 | 未使用变量/导入 | is declared but its value is never read | 删除未使用的声明,或在确需保留时加 _ 前缀 |
| P6 | 类型不兼容 | Type 'X' is not assignable to type 'Y' | 修正类型定义或使用类型断言 |
3. 逐一修复
按优先级从 P0 到 P6 依次修复:
- P0 缺少依赖包:检查
package.json,运行 pnpm add [-D] <pkg> 安装缺失的包
- P1 useRef 初始值:React 19 要求
useRef() 必须传初始值,改为 useRef<T>(undefined) 或 useRef<T>(null)
- P2 缺少 import:从项目内的 hooks/stores/utils 或 react 等包补充 import
- P3 模块找不到(本地文件存在):先执行
typescript.restartTsServer,若依然报错再检查路径
- P4-P6:按常规 TypeScript 修复方法处理
4. 验证
修复后执行两步验证:
get_errors 确认 VS Code 无报错
- 终端运行
npx tsc --noEmit 确认编译通过
若 get_errors 仍有残留但 tsc --noEmit 通过,执行 typescript.restartTsServer 刷新 TS Server 缓存。
5. 汇报
输出修复摘要:
✅ 前端门禁通过 — tsc --noEmit 零错误
修复内容:
- [file.tsx] 补充 useCallback, useTypingIndicator import
- [useWebSocket.ts] useRef 添加 undefined 初始值
- 安装缺失依赖 @storybook/test
React 19 常见陷阱
useRef<T>() → 必须传初始值:useRef<T>(undefined) 或 useRef<T>(null)
@types/react v19 变更了多个泛型签名,注意查看升级指南
forwardRef 在 React 19 中已弃用,改用 ref prop
项目约定
- 包管理器:
pnpm
- 配置文件:
tsconfig.app.json(strict 模式)
- 框架:React 19 + Vite + Zustand 5 + React Router 7