进阶使用技巧

批量文件操作

Codex 在处理批量文件操作时表现出色，可以极大地提高开发效率。

批量重命名

"将 src/components 目录下所有 .js 文件重命名为 .tsx"
"将所有图片文件从 .jpg 转换为 .webp 格式"

批量代码修改

"在所有页面组件中添加 SEO meta 标签"
"将所有 console.log 替换为 logger.info"
"为所有 API 路由添加错误处理中间件"

批量文件创建

"为每个数据模型创建对应的 CRUD API 路由"
"为 src/pages 下的每个页面创建一个对应的测试文件"

跨文件重构

组件提取与迁移

"将 Dashboard 页面中的图表逻辑提取到独立的 Chart 组件中"
"将 utils.ts 中的工具函数按功能拆分到独立的文件"

类型重构

"将所有 any 类型替换为具体的类型定义"
"从 API 响应中自动生成 TypeScript 类型"

导入路径重构

"将所有相对路径导入 '@/' 替换为 '@app/'"
"更新所有移动过的文件的导入路径"

调试技巧

交互式调试

"检查为什么这个 API 返回 500 错误"
"帮我调试这个 React 组件为何不重新渲染"

错误分析

当遇到编译错误时，可以直接将错误信息提供给 Codex：

"构建失败了，错误信息如下：[粘贴错误信息]"
"ESLint 报了很多错误，帮我逐一修复"

性能分析

"分析这个组件的渲染性能瓶颈"
"找出项目中可能导致内存泄漏的代码"

上下文管理

高效上下文构建

为了在有限的 Token 预算内获得最佳效果，可以：

"先阅读 src/app/page.tsx 和 src/app/layout.tsx 了解页面结构"
"然后查看 src/lib/api.ts 了解 API 调用方式"
"最后再给出修改建议"

上下文引用技巧

# 引用特定文件
"请参考 src/lib/constants.ts 中的配置"

# 引用代码片段
"参考这个函数的实现方式：[代码片段]"

# 引用目录结构
"按 src/components/ui 的模式创建新组件"

清除与重置

/compact          # 压缩上下文，保留关键信息
/clear            # 完全重置上下文

提示词优化

结构化提示

## 任务描述
实现一个用户登录功能

## 技术要求
- 使用 Next.js App Router
- 使用 Server Actions
- 使用 Prisma 数据库

## 约束条件
- 需要表单验证
- 需要错误处理
- 需要 loading 状态

## 输出要求
- 完整的组件代码
- 相关的类型定义
- 必要的注释

迭代式开发

# 第一步：设计方案
"请先分析需求，给出技术方案和目录结构建议"

# 第二步：实现核心
"按照设计方案实现核心功能"

# 第三步：完善细节
"添加错误处理和边界情况"

# 第四步：优化
"优化代码性能和可读性"

示例驱动

"参照 src/components/Button.tsx 的实现方式，创建一个 Dropdown 组件"
"类似这个模式：[示例代码]，创建 5 个新的表单组件"

高级工作流

自动化 Git 工作流

"创建 feature/login 分支"
"实现登录功能的所有文件"
"提交并推送代码"
"创建 Pull Request"

测试驱动开发

"先为这个函数编写测试用例"
"然后实现函数使其通过所有测试"
"最后优化实现代码"

代码审查工作流

"审查当前分支的所有变更"
"列出所有潜在的问题和改进建议"
"按照优先级生成修改计划"

效率提升技巧

自定义快捷指令

在 settings.json 中配置常用脚本：

{
  "customCommands": {
    "fix-lint": "运行 ESLint 自动修复",
    "gen-types": "从数据库生成 TypeScript 类型",
    "deploy": "部署到生产环境"
  }
}

会话模板

创建常用的会话启动模板：

"启动一个代码审查会话"
"启动一个新功能开发会话"
"启动一个调试会话"