前端开发与调试必备！100个精准提示词提升编码效率

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;display: table;padding: 0.3em 1em;color: rgb(255, 255, 255);background: rgb(15, 76, 129);border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;">一、组件开发

1. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   1. React组件：用TS编写一个带......功能的函数式组件（描述功能）
2. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   2. 组件Props：为......组件设计类型安全的Props接口
3. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   3. 状态管理：用useReducer重构......组件的复杂状态逻辑
4. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   4. 生命周期：在React类组件中实现......生命周期需求
5. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   5. 自定义Hook：创建一个处理......业务逻辑的自定义Hook
6. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   6. 高阶组件：用HOC实现......组件的通用功能增强
7. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   7. 条件渲染：优化......组件中多重条件判断的渲染逻辑
8. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   8. 列表渲染：为......数据列表实现带虚拟滚动的组件
9. ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.5em 8px;color: rgb(63, 63, 63);">
   9. 表单组件：创建一个受控的......复杂表单组件
10. 10. 模态框：实现支持无障碍访问的模态对话框组件
11. 11. 拖拽组件：用react-dnd实现......元素的拖拽功能
12. 12. 无限滚动：为......长列表实现无限滚动加载方案
13. 13. 懒加载：用Suspense实现......组件的动态懒加载
14. 14. 错误边界：为......关键组件添加错误捕获与降级UI
15. 15. 上下文：设计跨多层组件共享的......Context方案
16. 16. 性能优化：用React.memo优化......组件的重复渲染
17. 17. 动画组件：使用Framer Motion实现......交互动画
18. 18. 主题适配：创建支持动态主题切换的样式组件
19. 19. 国际化：为......组件添加多语言支持方案
20. 20. 服务端组件：用Next.js实现......服务端组件
21. 21. 复合组件：设计类似Antd的......复合组件结构
22. 22. 受控非受控：实现......组件的双模式支持
23. 23. 转发Ref：用forwardRef暴露......组件的DOM方法
24. 24. Portal组件：创建渲染到body末端的特殊组件
25. 25. 测试组件：为......组件编写完整的单元测试用例

二、样式与布局

1. 26. CSS模块：用CSS Modules解决......样式冲突问题
2. 27. 布局方案：实现......复杂页面的CSS Grid布局
3. 28. 响应式：为......组件编写移动端优先的响应式样式
4. 29. 主题变量：设计基于CSS变量的多主题系统
5. 30. 动画效果：用@keyframes实现......加载动画
6. 31. 样式优化：使用will-change优化......元素的渲染性能
7. 32. 字体处理：优化......网页字体加载与降级方案
8. 33. 图片适配：实现......响应式图片的srcset方案
9. 34. 暗黑模式：为......网站添加暗黑主题切换功能
10. 35. 样式重置：创建适合......项目的CSS重置方案
11. 36. BEM规范：按照BEM命名规范编写......组件样式
12. 37. 预处理：用Sass重构......项目的样式结构
13. 38. 样式隔离：解决......微前端项目的样式污染问题
14. 39. 打印样式：为......页面添加专用的打印样式表
15. 40. 视口适配：处理移动端viewport的特殊需求
16. 41. 粘性布局：实现......元素的sticky定位效果
17. 42. 渐变效果：用CSS渐变实现......视觉设计效果
18. 43. 滤镜应用：为......图片添加CSS滤镜效果
19. 44. 混合模式：使用mix-blend-mode实现......设计效果
20. 45. 裁剪路径：用clip-path创建......特殊形状元素

三、逻辑与工具函数

1. 46. 数据处理：编写......类型数据的格式化函数
2. 47. 日期处理：用date-fns实现......复杂日期计算
3. 48. 防抖节流：为......高频事件添加防抖/节流控制
4. 49. 深度比较：实现一个深度比较两个对象的函数
5. 50. 数据校验：编写验证......数据结构的工具函数
6. 51. URL处理：封装处理URL查询参数的实用方法
7. 52. 存储封装：统一localStorage/sessionStorage的API
8. 53. 请求取消：为fetch请求添加AbortController支持
9. 54. 错误封装：创建统一的API错误处理拦截器
10. 55. 树形操作：实现......树形数据的查找/过滤方法
11. 56. 数组优化：优化大数据量的......数组操作方法
12. 57. 缓存策略：为......数据请求添加内存缓存
13. 58. 权限校验：封装前端路由权限的校验逻辑
14. 59. 编码转换：处理......特殊字符的编解码问题
15. 60. Worker封装：将......耗时计算迁移到Web Worker
16. 61. 类型守卫：编写完善的TypeScript类型守卫函数
17. 62. 工具库：整理项目中可复用的工具函数集合
18. 63. 设计模式：用观察者模式实现......事件系统
19. 64. 状态机：用xstate管理......复杂组件状态
20. 65. 函数式：用Ramda重构......数据处理流程

四、调试与优化

1. 66. 性能分析：用Chrome DevTools分析......页面卡顿
2. 67. 内存泄漏：定位并修复......组件内存泄漏问题
3. 68. 渲染优化：解决......列表页面的滚动卡顿问题
4. 69. 打包分析：用webpack-bundle-analyzer优化产出
5. 70. 重绘回流：减少......元素布局抖动的方法
6. 71. 代码分割：优化......路由的懒加载拆分策略
7. 72. 预加载：为关键资源添加preload/prefetch
8. 73. 缓存策略：配置......静态资源的长期缓存方案
9. 74. 性能监控：收集并上报......页面性能指标
10. 75. 错误监控：搭建前端错误监控的完整方案
11. 76. 控制台：编写有用的console调试辅助方法
12. 77. 调试工具：创建......业务专用的React DevTools插件
13. 78. 日志分级：实现前端日志的等级分类与过滤
14. 79. 埋点调试：验证......用户行为埋点的准确性
15. 80. 移动调试：使用vConsole调试移动端页面
16. 81. 接口Mock：搭建......项目的API Mock方案
17. 82. 压力测试：模拟......高并发场景的前端表现
18. 83. 内存分析：用Heap Snapshot分析内存使用
19. 84. 渲染跟踪：用React Profiler分析组件渲染
20. 85. 性能指标：监控并优化Lighthouse评分

五、工程与协作

1. 86. Git规范：制定团队Git提交信息的规范模板
2. 87. 代码审查：创建前端代码审查的重点检查项
3. 88. 冲突解决：处理......Git合并冲突的最佳实践
4. 89. 文档生成：用TypeDoc自动生成API文档
5. 90. 注释规范：编写清晰有效的JSDoc注释示例
6. 91. 环境配置：统一团队开发环境的配置方案
7. 92. 脚手架：定制......技术栈的CLI创建工具
8. 93. 代码模板：创建常用组件的代码片段模板
9. 94. 规范检查：配置ESLint+Prettier的严格规则
10. 95. 提交拦截：设置Git钩子进行代码质量检查
11. 96. 协作流程：优化多人协作的Git分支策略
12. 97. 问题定位：创建常见问题的排查流程图
13. 98. 知识共享：记录......技术难点的解决方案
14. 99. 调试指南：编写新成员的调试环境配置文档
15. 100. 经验沉淀：将......优化经验转化为团队标准