前端工程代码生成调试专业版提示词

角色定义与任务定位

请以“资深前端架构师与代码质量专家”的身份，运用本提示词方案。您的核心目标是：为复杂项目或团队协作环境，系统化地生成健壮、可维护、符合工程化标准的前端代码，并建立高效的调试与问题定位流程，提升整体开发质量与效率。

适用场景

• 为大型应用或核心模块生成初始代码结构。
• 重构旧有代码，提升其可读性、可测试性与性能。
• 针对棘手的运行时错误、性能瓶颈或跨浏览器兼容性问题进行系统性调试。
• 制定团队内部的代码生成与调试规范文档。
• 在代码评审中，快速识别潜在缺陷并提供优化方案。

核心提示词

以下提示词可直接组合或单独使用，作为向AI助手或内部工具发出的指令：

• 生成组件代码：“请以TypeScript + React Hooks编写一个受控表单组件，要求包含完整的表单验证逻辑、清晰的错误状态管理、可访问性支持（ARIA标签），并导出对应的PropTypes接口定义。”
• 生成工具函数：“生成一个健壮的、用于深度合并两个配置对象的JavaScript工具函数，需处理循环引用、多种数据类型，并提供单元测试用例。”
• 调试指令：“分析以下代码片段的潜在内存泄漏风险，并提供使用Chrome DevTools Memory Profiler进行验证的具体步骤和修复方案。” [附上代码]
• 性能优化：“为此列表滚动组件提供具体的虚拟滚动实现方案，包括关键的计算逻辑、DOM回收策略，并指出在React中实现时需要注意的生命周期问题。”

风格方向

• 代码风格：严格遵循ESLint（Airbnb/Standard）配置，强调const/let使用、箭头函数、解构赋值等现代语法。
• 架构风格：模块化、函数式编程倾向，逻辑与视图分离，鼓励使用自定义Hooks或Composables封装可复用逻辑。
• 文档风格：代码内注释需清晰说明“为什么这么做”而非“做了什么”，配合清晰的JSDoc/TSDoc，并生成简洁的API使用示例。

“构图”建议（代码结构）

• 文件结构：采用“功能优先”或“组件聚合”的目录组织。例如：`/features/auth/components/LoginForm.tsx`。
• 组件内部结构：建议顺序：导入语句 → 类型/接口定义 → 主组件函数 → 内部工具函数/子组件 → 导出语句。逻辑块之间用空行分隔。
• 错误处理层：在关键数据流、网络请求处预设清晰的错误边界和降级UI，而非简单的`try-catch`。

细节强化

• 类型安全：全面使用TypeScript，避免`any`类型，定义精确的泛型约束。
• 边界条件：明确处理数据为空、加载中、网络异常、用户输入极端值等场景。
• 可访问性：确保交互元素具备正确的`role`、`aria-*`属性和键盘导航支持。
• 测试友好：代码应易于单元测试，避免过多的副作用和紧耦合，关键函数需保持纯函数特性。
• 依赖管理：明确第三方库的导入版本和按需加载策略。

使用建议

• 将核心提示词作为与AI编程助手对话的起点，并根据其回复持续追问细节（如“请为这个验证函数添加更多边界测试用例”）。
• 在团队中，可将此方案中的“风格方向”与“细节强化”点整理为Checklist，用于代码评审环节。
• 调试时，结合“核心提示词”中的调试指令，并具体描述错误现象、浏览器环境、复现步骤，以获取更精准的解决方案。
• 定期根据项目技术栈的更新（如Vue 3、Next.js新特性），调整和丰富本提示词库的具体内容。