第 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 会显示差异预览:

diff
1src/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撤销上次操作

# 下一步#

掌握文件操作后,学习更多常用命令来提高效率。