高效前端工程代码生成调试提示词

角色定义与任务定位

请以“资深前端架构师”或“自动化代码流程专家”的身份，运用本提示词方案。你的核心目标是：系统化地利用AI工具或清晰指令，生成高质量、可维护的前端工程代码，并快速定位、分析与解决代码在开发、构建、运行各阶段出现的典型问题，最终形成标准化、可复用的代码生产与调试流程。

适用场景

• 为新功能模块或组件快速生成样板代码与基础逻辑。
• 对现有代码进行重构、优化或技术栈迁移。
• 在CI/CD流程中自动生成单元测试或E2E测试用例。
• 诊断与修复运行时错误、性能瓶颈、兼容性问题。
• 为团队新人或特定技术方案编写标准化的代码示例与文档。

核心提示词

以下提示词组合可根据具体场景组合或拆解使用：

• 生成组件代码：“请使用React 18 + TypeScript，生成一个受控的、支持虚拟滚动的动态表格组件。要求：包含完整的类型定义、useMemo/useCallback性能优化、可配置的列定义、以及分页加载逻辑。代码需遵循ESLint Airbnb规则。”
• 生成工具函数：“编写一个健壮的`debounce`函数，要求支持TypeScript泛型以适配不同函数签名，并提供立即执行`immediate`选项。附上单元测试用例（使用Jest）。"
• 调试构建错误：“以下是Webpack 5构建时出现的模块解析错误日志：[粘贴错误日志]。请分析可能的原因，并提供具体的配置修正方案与依赖调整建议。”
• 调试运行时问题：“分析这段Vue 3组合式API代码，指出其中可能导致响应性丢失的代码行，并解释原因及提供修正后的代码片段。”
• 完整流程指令：“为一个‘用户登录’功能，提供从前端表单验证（使用Zod）、API请求封装（使用axios拦截器）、状态管理（使用Pinia/Vuex）到错误边界处理的完整代码示例与关键逻辑说明。”

风格方向

• 代码风格：工业级、模块化、声明式。优先使用现代ES6+语法、异步编程最佳实践（async/await）。
• 架构风格：强调关注点分离、单向数据流、函数式编程思想。代码结构清晰，注释用于解释“为什么”而非“是什么”。
• 输出风格：结果应包含代码块、简要的逻辑流程图或步骤说明、关键配置片段，以及潜在的风险提示。

构图建议（指令结构设计）

• 分层叙述：采用“背景/需求 -> 技术栈约束 -> 核心功能点 -> 代码实现 -> 测试与调试要点”的递进结构。
• 输入输出明确：在请求生成代码时，明确指定输入数据格式和期望的输出结构。
• 问题隔离：调试时，先将大问题分解为“环境配置”、“编译时”、“运行时”、“网络请求”、“状态管理”等小模块，再针对性地提供错误上下文。

细节强化

• 依赖版本：在提示词中指定关键库（如React, Vue, Webpack, Vite）的大版本号，避免生成过时或冲突的API用法。
• 性能与安全：明确要求考虑防XSS注入、避免内存泄漏、列表渲染优化、代码分割等细节。
• 兼容性要求：如需要，指定浏览器兼容范围（如“需支持ES5”或“兼容Chrome 90+”）。
• 行业应用：可关联具体场景，如“为金融仪表盘生成高精度数据可视化组件”或“为电商项目生成支持SKU选择的商品卡片组件”。

使用建议

• 将“核心提示词”中的模板作为基础，替换其中的技术栈、组件名、具体需求以快速生成新指令。
• 调试时，务必提供完整的错误信息、相关代码片段、以及你已尝试过的排查步骤，这将极大提升诊断准确性。
• 对于复杂功能，采用“分步生成”策略：先生成架构和接口定义，再逐一实现具体函数。
• 生成的代码应视为“第一草案”，务必在真实环境中进行测试、代码审查和必要的调整，以融入项目特定规范。