第 4 / 5 节10 分钟
📁
文件操作
引用文件、读取代码、创建和编辑文件
🎬
视频教程即将上线
文件操作
OpenCode 可以帮你读取、创建、修改和管理项目文件。
# 文件读取#
## 查看文件内容#
❯ 显示 src/index.ts 的内容
❯ 读取 package.json
❯ 查看配置文件 .env.example
## 搜索文件#
❯ 找到所有 TypeScript 文件
❯ 搜索包含 "TODO" 的文件
❯ 查找名称包含 "test" 的文件
## 分析代码#
❯ 分析 src/components 目录结构
❯ 列出所有导出的函数
❯ 找出未使用的导入
# 文件创建#
## 创建新文件#
❯ 创建一个新的 React 组件 Button.tsx
❯ 在 src/utils 下创建 helpers.ts
❯ 生成一个标准的 .gitignore 文件
## 创建目录结构#
❯ 创建一个标准的 React 项目结构
❯ 添加 tests 目录并创建示例测试文件
# 文件修改#
## 编辑文件#
❯ 修改 src/App.tsx,添加路由配置
❯ 更新 package.json 的依赖版本
❯ 在 README.md 中添加使用说明
## 代码重构#
❯ 重构 utils.js,拆分成多个模块
❯ 将所有 var 替换为 const/let
❯ 统一代码风格
## 批量修改#
❯ 将所有组件的默认导出改为命名导出
❯ 给所有函数添加 TypeScript 类型
❯ 更新所有文件的版权声明
# 确认机制#
OpenCode 在修改文件前会请求确认:
❯ 删除 temp.js
OpenCode: 我将删除以下文件:
- temp.js
确认执行?[Y/n]
## 自动确认#
如果你信任 OpenCode 的操作,可以启用自动确认:
❯ /auto-confirm on
谨慎使用此功能,建议只在熟悉项目后开启。
# 文件差异预览#
修改文件前,OpenCode 会显示差异预览:
diff1src/utils/api.ts 2─────────────────────────────────── 3- export function fetchData(url) { 4+ export async function fetchData(url: string): Promise<Response> { 5 return fetch(url); 6 } 7─────────────────────────────────── 8Apply changes? [Y/n]
# 撤销操作#
如果对修改不满意,可以撤销:
❯ /undo
或指定撤销特定文件:
❯ /undo src/App.tsx
# 文件操作最佳实践#
## 1. 先预览再执行#
❯ 显示你打算对 App.tsx 做的修改
❯ 好的,执行修改
## 2. 使用版本控制#
在进行大量修改前,确保代码已提交:
❯ 帮我提交当前的更改
❯ 然后重构 src/services 目录
## 3. 分批处理#
对于大型重构,分批进行更安全:
❯ 先重构 src/components 目录
❯ 测试没问题后,再处理 src/pages
# 常见文件操作命令#
| 命令 | 说明 |
|---|---|
/ls | 列出当前目录文件 |
/cat <file> | 显示文件内容 |
/find <pattern> | 搜索文件 |
/diff | 显示未提交的更改 |
/undo | 撤销上次操作 |
# 下一步#
掌握文件操作后,学习更多常用命令来提高效率。