AI 怎么帮你重构前端烂代码？一键生成优雅组件
提示词描述：
前端开发者的代码洁癖福音！这个提示词能让 AI 化身资深架构师，帮你一键重构冗长、混乱的前端代码。通过组件拆分、状态优化和逻辑提取，将‘屎山代码’变成优雅、可维护的高质量工程。大幅提升代码可读性与开发效率，让你告别加班改 Bug 的痛苦。
提示语关键词：
AI编程,前端开发,代码重构,AI写代码,前端提示词,提升开发效率
提示词内容：
【使用场景】
前端兄弟们，平时接手屎山代码是不是想砸键盘？或者自己赶进度写了一堆 if-else，回头一看连自己都看不懂？别慌，今天教大家用 AI 当你的“代码洁癖导师”。这个提示词专门用来重构前端代码，不管是 React 还是 Vue，都能帮你把又臭又长的代码变得优雅、可维护。绝对是提升开发效率的利器！
【操作步骤】
第一步：打开你的代码编辑器，选中那段让你头疼的“烂代码”。
第二步：复制下面的提示词模板，把 {填写} 的部分替换成你的实际情况。
第三步：把代码和提示词一起发给 AI，让它帮你重构。
第四步：把 AI 生成的代码复制到项目里，跑一下测试，看看效果。
提示词模板：
“你是一个拥有10年经验的高级前端架构师。请帮我重构以下 {填写前端框架，如：React/Vue3} 代码。要求：1. 遵循单一职责原则，将大组件拆分为合理的小组件；2. 优化状态管理，避免不必要的重渲染；3. 提取重复逻辑为自定义 Hook/Composable；4. 添加清晰的注释和 TypeScript 类型定义；5. 保持原有功能不变。代码如下：{填写你的代码}”
【效果示例】
带步骤清单的对比分析：
1. 原始代码：一个 500 行的组件，里面混杂了数据请求、状态计算和 DOM 渲染，各种嵌套的三元运算符。
2. AI 重构后：
- 提取出 useDataFetch.js 处理数据请求逻辑。
- 提取出 useCalculate.js 处理复杂的状态计算。
- 主组件只剩下 50 行，全是清晰的 UI 渲染和组件组合。
- 每个变量和函数都加上了严谨的 TS 类型。
看完是不是神清气爽？代码可读性直接拉满！
【进阶技巧】
重构完代码后，别忘了让 AI 帮你写单元测试！你可以接着对它说：“请根据重构后的代码，使用 {填写测试框架，如：Jest/Vitest} 生成完整的单元测试用例，覆盖核心逻辑和边界情况。”这样不仅代码漂亮了，质量也有保障了，老板看了都得给你加鸡腿！