mirror of
https://github.com/Gmaker689/ai-diff-preview.git
synced 2026-09-26 23:11:51 +08:00
109 lines
2.4 KiB
Markdown
109 lines
2.4 KiB
Markdown
|
# AI Code Diff Preview
|
|||
|
|
|
|||
|
|
类 Cursor 的 AI 代码差异预览 VSCode 插件，支持 Accept/Reject 操作。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- ✅ **临时变更隔离** - AI 生成的代码不直接覆盖文件
|
|||
|
|
- ✅ **实时 Diff 预览** - 红绿高亮显示删除/新增内容
|
|||
|
|
- ✅ **逐行 Accept/Reject** - 支持单块、整块操作
|
|||
|
|
- ✅ **冲突检测** - 自动检测用户手动修改导致的冲突
|
|||
|
|
- ✅ **Claude Hooks 集成** - 自动触发 Diff 预览
|
|||
|
|
- ✅ **状态栏显示** - 实时显示变更状态
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 克隆项目
|
|||
|
|
git clone https://github.com/your-username/ai-diff-preview.git
|
|||
|
|
|
|||
|
|
# 安装依赖
|
|||
|
|
cd ai-diff-preview
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 编译
|
|||
|
|
npm run build
|
|||
|
|
|
|||
|
|
# 打包
|
|||
|
|
npm run package
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 配置 Claude Hooks
|
|||
|
|
|
|||
|
|
在 Claude 配置文件中添加 Hook：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"hooks": {
|
|||
|
|
"after_code_edit": {
|
|||
|
|
"command": "code",
|
|||
|
|
"args": ["--command", "aiDiffPreview.handleHook"]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 快捷键
|
|||
|
|
|
|||
|
|
| 快捷键 | 功能 |
|
|||
|
|
|--------|------|
|
|||
|
|
| `Tab` / `Enter` | 接受当前块 |
|
|||
|
|
| `Esc` | 拒绝所有变更 |
|
|||
|
|
| `Ctrl+Shift+A` | Accept All |
|
|||
|
|
| `Ctrl+Shift+R` | Reject All |
|
|||
|
|
|
|||
|
|
### 3. CodeLens 按钮
|
|||
|
|
|
|||
|
|
在代码上方会出现 Accept/Reject 按钮，点击即可操作。
|
|||
|
|
|
|||
|
|
## 开发
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 监听模式
|
|||
|
|
npm run watch
|
|||
|
|
|
|||
|
|
# 运行测试
|
|||
|
|
npm run test
|
|||
|
|
|
|||
|
|
# 代码检查
|
|||
|
|
npm run lint
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── extension.ts # 插件入口
|
|||
|
|
├── trigger/
|
|||
|
|
│ └── hookHandler.ts # Claude Hook 处理器
|
|||
|
|
├── snapshot/
|
|||
|
|
│ └── snapshotManager.ts # 快照管理器
|
|||
|
|
├── diff/
|
|||
|
|
│ └── diffEngine.ts # Diff 计算引擎
|
|||
|
|
├── render/
|
|||
|
|
│ ├── inlineDecorator.ts # 内联装饰器
|
|||
|
|
│ ├── codeLensProvider.ts # CodeLens 提供器
|
|||
|
|
│ └── statusBar.ts # 状态栏
|
|||
|
|
├── transaction/
|
|||
|
|
│ ├── acceptHandler.ts # Accept 处理器
|
|||
|
|
│ └── rejectHandler.ts # Reject 处理器
|
|||
|
|
└── models/
|
|||
|
|
├── types.ts # 类型定义
|
|||
|
|
└── constants.ts # 常量定义
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 配置项
|
|||
|
|
|
|||
|
|
| 配置项 | 类型 | 默认值 | 说明 |
|
|||
|
|
|--------|------|--------|------|
|
|||
|
|
| `aiDiffPreview.enableAutoTrigger` | boolean | true | 启用自动触发 |
|
|||
|
|
| `aiDiffPreview.showInlineButtons` | boolean | true | 显示内联按钮 |
|
|||
|
|
| `aiDiffPreview.autoLint` | boolean | true | 自动运行 Lint |
|
|||
|
|
| `aiDiffPreview.maxFileSize` | number | 100000 | 最大文件大小 |
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
MIT
|