🔍 Code Review Notes - VS Code Extension
一个强大的VS Code代码评论扩展,提供智能的addComment功能,支持多用户协作、灵活同步系统和完整的评论生命周期管理。
💬 智能代码评论 - 主要特色
addComment
是本扩展的核心功能,提供智能的代码评论体验。当您选中代码时,会在选中区域上方自动显示 "Add Comment" 按钮,让代码评论变得简单直观。
🎯 使用方法
主要方式: 智能按钮(推荐)
1. 选择要评论的代码段
2. 在选中代码上方会自动出现 "Add Comment" 按钮
3. 点击按钮
4. 在弹出的输入框中输入评论
5. 按 Enter 确认
备用方式1: 快捷键
1. 选择要评论的代码段
2. 按 Ctrl+Shift+C (Mac: Cmd+Shift+C)
3. 在输入框中输入评论
4. 按 Enter 确认
备用方式2: 右键菜单
1. 选择要评论的代码段
2. 右键点击选中区域
3. 选择 "Add Comment"
4. 在输入框中输入评论
5. 按 Enter 确认
备用方式3: 命令面板
1. 选择要评论的代码段
2. 按 Ctrl+Shift+P (Mac: Cmd+Shift+P)
3. 输入 "Add Comment" 并选择
4. 在输入框中输入评论
5. 按 Enter 确认
✨ 功能特点
- 🔘 智能按钮显示: 选中代码时自动在上方显示 "Add Comment" 按钮
- 🔧 智能上下文检测: 自动识别选中的代码段,无需手动指定位置
- 💬 清爽输入体验: 简洁的输入框,专注评论内容
- 📍 精准位置定位: 评论准确关联到选中的代码行和文件位置
- 🎨 即时视觉反馈: 添加评论后立即显示高亮效果
📝 详细使用步骤
步骤1: 选择代码
- 用鼠标拖拽选择要评论的代码段
- 或者用键盘快捷键选择(Shift+方向键)
步骤2: 点击Add Comment按钮
- 选中代码后,上方会自动显示 "Add Comment" 按钮
- 点击按钮启动评论功能
- 可以选择单行或多行代码
步骤2: 触发addComment
- 最快方式:
Ctrl+Shift+C
- 或右键选择 "Add Comment"
- 或命令面板输入 "Add Comment"
步骤3: 内联输入
- 系统会在编辑器中显示内联输入框
- 输入框显示提示:"输入评论..."
- 直接输入您的评论内容
步骤4: 确认提交
- 按
Enter
确认添加评论
- 按
Escape
取消操作
- 评论添加后会立即显示高亮效果
🎪 实际使用示例
JavaScript代码评论示例:
// 选择这段代码
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
// 按 Ctrl+Shift+C,输入:"建议添加参数验证"
Python代码评论示例:
# 选择这段代码
def process_data(data):
return [x * 2 for x in data if x > 0]
# 按 Ctrl+Shift+C,输入:"考虑处理空数据的情况"
🔍 评论管理功能
添加评论后,您可以:
- 👀 查看评论: 鼠标悬停在高亮区域查看详情
- 💬 回复评论: 在侧边栏树视图中右键选择 "Reply to Comment"
- ✅ 解决评论: 右键选择 "Resolve Comment"
- 🗑️ 删除评论: 右键选择 "Delete Comment"
- 🔄 重开评论: 对已解决的评论选择 "Unresolve Comment"
💬 立即体验核心功能
第一次使用?只需3步:
选择代码
在任意代码文件中,用鼠标选择一段代码
添加评论
选中代码后,上方会出现 "Add Comment" 按钮
点击按钮,或按 Ctrl+Shift+C
输入并确认
在弹出的输入框中输入评论内容
按 Enter 键确认
效果:
- ✅ 代码立即显示高亮背景
- ✅ 侧边栏出现"Code Review Notes"面板
- ✅ 鼠标悬停可查看评论详情
⚙️ 可选设置
设置用户名(推荐)
Ctrl+Shift+P → 输入"Set Username" → 输入您的名字
这样您的评论会显示正确的作者信息。
体验更多功能
- 💬 回复评论: 侧边栏右键评论 → "Reply to Comment"
- ✅ 解决评论: 右键评论 → "Resolve Comment"
- 👀 查看所有评论: 点击侧边栏"All Comments"视图
✨ 其他核心特性
- 🔄 同步通知优化: 减少git同步时的不必要通知干扰
- 🎛️ 全模块集成: 通知级别控制系统扩展至所有模块
- ⚙️ 统一接口: 统一的通知系统确保一致用户体验
🔔 通知级别控制 v0.1.1-0.1.4
- 🔔 通知级别设置: 通过配置控制通知显示频率
- 🧹 减少不必要通知: 优化同步操作的通知体验
- 🛠️ 修复UI问题: 解决了AddComment UI无选择时显示的问题
🔄 灵活同步系统 v0.1.0
- 🔄 多种同步策略: 本地存储 / Git同步 / 服务器同步(即将推出)
- 🎮 交互式选择器: 一键切换同步方法,无缝数据迁移
- ⚙️ 策略模式架构: 可扩展设计,轻松添加新的同步方式
- 🛡️ 向后兼容: 保留所有现有功能,平滑升级体验
- 📊 实时状态监控: 同步状态和健康指标显示
同步方法详解
同步方法 |
适用场景 |
特点 |
🏠 本地存储 |
个人使用 |
快速、可靠、无需外部依赖 |
🔗 Git同步 |
团队协作 |
通过Git仓库同步,支持分支和合并 |
🌐 服务器同步 |
实时协作 |
类似Overleaf,实时更新(开发中) |
🎨 多用户协作
- 🌈 用户特定颜色: 8种预设颜色,自动为不同用户分配
- 💬 评论线程: 支持评论回复,构建完整讨论
- 👤 解决者信息追踪: 自动记录谁解决了评论及解决时间
- 👥 多用户场景: 完整支持团队代码评审工作流
🖥️ 界面体验
- 🌳 双重树视图: 当前文件 + 全工作区评论视图
- ✅ 状态管理: 已解决/未解决评论视觉区分
- 🎯 悬停提示: 完整评论详情和解决者信息
- 🔍 智能过滤: 按状态过滤(全部/已解决/未解决)
⚡ 便捷操作
- ⌨️ 快捷键:
Ctrl+Shift+C
快速添加评论
- 🖱️ 上下文菜单: 右键快速操作
- 📋 命令面板: 完整命令集成
🚀 快速开始
💬 体验GitHub Copilot风格的内联聊天
选择要评论的代码
在编辑器中用鼠标或键盘选择任意代码段
快速添加评论
方法1: 右键选择 "Add Comment"
方法2: 按快捷键 Ctrl+Shift+C (Mac: Cmd+Shift+C)
方法3: 命令面板输入 "Add Comment"
享受内联聊天体验
系统会显示GitHub Copilot风格的内联输入框
直接在编辑器上下文中输入评论,无弹窗干扰
⚙️ 设置同步系统
选择同步方法
Ctrl+Shift+P → "Choose Sync Method" → 选择适合的同步策略
- 本地存储: 默认选项,适合个人使用
- Git同步: 适合团队协作,需要Git仓库
- 服务器同步: 即将推出的实时协作功能
设置用户名
Ctrl+Shift+P → "Set Username" → 输入您的用户名
体验同步功能
Ctrl+Shift+P → "Sync Now" → 立即同步评论
Ctrl+Shift+P → "Get Sync Status" → 查看同步状态
📋 功能详解
同步系统操作
操作 |
命令 |
说明 |
选择同步方法 |
"Choose Sync Method" |
交互式选择器,支持实时切换 |
立即同步 |
"Sync Now" |
手动触发完整同步 |
查看状态 |
"Get Sync Status" |
显示当前同步方法和状态 |
Git同步 |
"Sync Comments to Git" |
向后兼容的Git同步命令 |
Git加载 |
"Load Comments from Git" |
从Git仓库加载评论 |
自动同步 |
"Enable Auto Sync" |
启用Git自动同步 |
评论操作
操作 |
方法 |
说明 |
添加评论 |
选择文本 → 右键 / Ctrl+Shift+C |
使用当前设置的用户名 |
回复评论 |
树视图右键 → "Reply to Comment" |
形成讨论线程 |
解决评论 |
树视图右键 → "Resolve Comment" |
记录解决者和时间 |
重开评论 |
树视图右键 → "Unresolve Comment" |
清除解决状态 |
查看详情 |
鼠标悬停代码高亮区域 |
显示完整信息 |
跳转位置 |
点击树视图评论条目 |
直接导航到代码 |
解决者信息显示
悬停提示格式
✅ 已解决
作者: Alice
时间: 2024-12-26 14:30:25
解决者: Bob (2024-12-26 15:45:10)
评论内容...
树视图格式
📁 src/example.js
✅ 需要添加错误处理 (已解决 by Bob)
💬 建议优化性能
视觉反馈系统
评论高亮
- 未解决评论: 实线彩色边框,用户专属颜色
- 已解决评论: 虚线半透明边框,淡化显示
- 用户颜色: 自动分配8种颜色中的一种
用户颜色方案
- 🟠 橙黄色
#ff9500
2. 🟢 绿色 #30d158
- 🔵 蓝色
#007aff
4. 🔴 红色 #ff3b30
- ⚫ 灰色
#8e8e93
6. 🟣 紫色 #af52de
- 🟤 深橙色
#ff6b35
8. 🔷 青色 #32d2c9
🎯 命令列表
命令 |
功能 |
快捷键 |
Set Username |
设置当前用户名 |
- |
Add Comment |
添加新评论 |
Ctrl+Shift+C |
Reply to Comment |
回复评论 |
- |
Resolve Comment |
解决评论(记录解决者) |
- |
Unresolve Comment |
重新打开评论 |
- |
Refresh Comments |
刷新评论视图 |
- |
Create Test Comments |
创建多用户演示评论 |
- |
Toggle Comment Highlights |
切换评论高亮 |
- |
Toggle Resolved Highlights |
切换已解决评论高亮 |
- |
⚙️ 配置选项
在VS Code设置中可配置:
{
"codeReviewNotes.defaultAuthor": "YourName",
"codeReviewNotes.syncMethod": "local",
"codeReviewNotes.serverUrl": "http://localhost:3000",
"codeReviewNotes.serverAuthToken": "your-token",
"codeReviewNotes.enableRealTimeSync": false,
"codeReviewNotes.showResolvedCommentHighlights": true,
"codeReviewNotes.unresolvedCommentColor": "#ff9500",
"codeReviewNotes.resolvedCommentColor": "#30d158"
}
新增配置项说明
配置项 |
类型 |
默认值 |
说明 |
syncMethod |
string |
"local" |
同步方法: local/git/server |
serverUrl |
string |
"" |
服务器同步URL地址 |
serverAuthToken |
string |
"" |
服务器同步认证令牌 |
enableRealTimeSync |
boolean |
false |
启用实时同步(需服务器支持) |
🏗️ 技术架构
策略模式设计
// 抽象同步策略
abstract class SyncStrategy {
abstract getSyncMethod(): SyncMethod;
abstract isSupported(): Promise<boolean>;
abstract saveComments(comments: Comment[]): Promise<SyncResult>;
abstract loadComments(): Promise<Comment[]>;
abstract performFullSync(localComments: Comment[]): Promise<Comment[]>;
}
// 具体策略实现
class LocalSyncStrategy extends SyncStrategy { ... }
class GitSyncStrategy extends SyncStrategy { ... }
class ServerSyncStrategy extends SyncStrategy { ... }
// 统一管理器
class SyncManager {
async setSyncMethod(method: SyncMethod): Promise<void>
async showSyncMethodPicker(): Promise<void>
getCurrentSyncMethod(): SyncMethod
}
文件结构
src/
├── syncStrategy.ts # 抽象基类和接口
├── localSyncStrategy.ts # 本地同步实现
├── gitSyncService.ts # Git同步实现
├── serverSyncStrategy.ts # 服务器同步占位
├── syncManager.ts # 同步管理器
├── commentService.ts # 评论服务(已重构)
└── extension.ts # 扩展入口(新增命令)
🔧 开发调试
环境要求
- VS Code 1.100.0+
- Node.js 16+
- TypeScript 5.0+
本地开发
# 安装依赖
npm install
# 编译TypeScript
npm run compile
# 启动监听模式
npm run watch
# 运行扩展
按 F5 启动Extension Development Host
扩展打包
# 打包为VSIX文件
npx @vscode/vsce package
📁 数据存储
存储位置
- 评论数据: 工作区状态存储
- 用户设置: VS Code工作区配置
- 用户颜色: 扩展上下文存储
评论数据结构
interface Comment {
id: string;
text: string;
author: string;
timestamp: number;
range: CommentRange;
documentUri: string;
resolved: boolean;
resolvedBy?: string; // 🆕 解决者用户名
resolvedAt?: number; // 🆕 解决时间戳
replies: Reply[];
}
🧪 测试场景
基础功能测试
- ✅ 设置用户名并验证保存
- ✅ 添加评论使用正确用户名
- ✅ 解决评论并记录解决者信息
- ✅ 验证悬停提示显示解决者详情
- ✅ 检查树视图解决者信息格式
多用户协作测试
- ✅ 运行"Create Test Comments"命令
- ✅ 验证不同用户显示不同颜色
- ✅ 测试解决其他用户的评论
- ✅ 检查解决者信息的正确显示
边界条件测试
- ✅ 空用户名处理
- ✅ 特殊字符用户名
- ✅ 长用户名显示
- ✅ 向后兼容性(旧评论无解决者信息)
🐛 故障排除
常见问题
Q: 如何设置用户名?
A: 按Ctrl+Shift+P
,输入"Set Username",在弹出框中输入您的用户名
Q: 解决者信息不显示?
A: 确保评论是在设置用户名后解决的,旧评论可能没有解决者信息
Q: 扩展没有激活?
A: 检查VS Code版本(需要1.100.0+),在Extension Development Host中按F5运行
Q: 评论颜色冲突?
A: 可在设置中自定义颜色,或切换VS Code主题
📊 版本历史
v0.1.0 (当前版本) - 2025年5月26日
🚀 重大功能发布: 灵活同步系统
- ✅ 策略模式架构重写
- ✅ 本地/Git/服务器三种同步策略
- ✅ 交互式同步方法选择器
- ✅ 向后兼容所有现有功能
- ✅ 新增6个同步相关命令
- ✅ 完整的配置选项支持
v0.0.2 - 2025年5月26日
- ✅ 用户特定颜色系统
- ✅ 解决者信息追踪
- ✅ 悬浮提示优化
- ✅ 测试评论命令
v0.0.1 - 2025年5月26日
- ✅ 基础评论功能
- ✅ 双树视图界面
- ✅ 评论线程和回复
- ✅ 状态管理和高亮
🔮 路线图
即将推出 (v0.2.0)
- [ ] 🌐 服务器同步实现: WebSocket实时通信
- [ ] 👥 团队功能: 用户管理和在线状态
- [ ] 🔔 通知系统: 评论更新提醒
未来版本
- [ ] 📊 分析报告: 导出评论报告(PDF/Excel)
- [ ] 🔗 平台集成: GitHub/Azure DevOps集成
- [ ] 🎯 工作流: 代码审查工作流自动化
- [ ] 📱 移动支持: VS Code移动版适配
🧪 测试验证
同步系统测试 ✅
# 运行集成测试
node integration_test.js
测试覆盖:
- ✅ 所有文件正确编译
- ✅ 命令正确注册
- ✅ 配置项正确设置
- ✅ 策略切换正常工作
- ✅ 向后兼容性保持
功能测试建议
- 基础功能: 创建→回复→解决评论
- 同步切换: 本地↔Git↔服务器策略切换
- 多用户协作: 不同用户颜色和解决者信息
- Git集成: 分支同步和冲突处理
🐛 故障排除
同步相关问题
Q: 如何切换同步方法?
A: Ctrl+Shift+P
→ "Choose Sync Method" → 选择新的同步策略
Q: Git同步失败?
A: 确保当前工作区是Git仓库,并且有适当的读写权限
Q: 服务器同步不可用?
A: 服务器同步功能当前为占位实现,将在v0.2.0版本中完整实现
Q: 数据会丢失吗?
A: 切换同步方法时会自动迁移数据,建议切换前手动同步一次
通用问题
Q: 扩展没有激活?
A: 检查VS Code版本(需要1.100.0+),重新安装扩展
Q: 命令找不到?
A: 重新加载窗口 (Ctrl+Shift+P
→ "Reload Window")
📄 许可证
MIT License
🤝 贡献
欢迎提交Issue和Pull Request!
- Fork项目
- 创建功能分支 (
git checkout -b feature/amazing-feature
)
- 提交更改 (
git commit -m 'Add amazing feature'
)
- 推送到分支 (
git push origin feature/amazing-feature
)
- 发起Pull Request
开发者: GitHub Copilot
项目状态: ✅ 生产就绪,同步系统架构完整
最后更新: 2025年5月26日
🚀 立即开始:
- 按
F5
启动扩展开发环境
Ctrl+Shift+P
→ "Choose Sync Method" 选择同步策略
- 开始体验强大的协作功能!