# vsc-codememo **Repository Path**: chenxigeng/vsc-codememo ## Basic Information - **Project Name**: vsc-codememo - **Description**: 开发问题记录插件 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-01 - **Last Updated**: 2025-09-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # CodeMemo - VSCode 智能代码记录插件 一个强大且现代化的 VSCode 扩展，帮助开发者高效记录、管理和跟踪代码中的问题与解决方案。 ## ✨ 功能特色 ### 🎯 核心功能 - **📝 智能代码记录** - 选中代码片段，快速记录遇到的问题和解决方案 - **🏷️ 标签分类管理** - 支持为记录添加标签，最多6个标签，便于分类和检索 - **💬 自动注释标记** - 根据文件类型自动插入带有记录ID的注释标记 - **📊 侧边栏管理** - 专用侧边栏视图，统一管理所有记录，支持标签显示 - **📱 详情面板** - 点击记录查看完整的问题描述、解决方案和标签信息 - **💾 智能保存** - 所有操作自动保存，支持实时同步 ### 🚀 高级功能 - **🏢 工作区隔离** - 不同工作区的记录完全独立存储 - **🌍 多语言支持** - 自动识别文件类型，使用相应的注释格式 - **🔄 实时同步** - 记录与代码注释实时同步更新 - **🎯 快速跳转** - 从记录直接跳转到对应代码位置 - **🎨 标签筛选** - 点击标签可快速筛选相关记录 - **⚙️ 面板管理** - 支持单开/多开详情面板模式 ### 🛡️ 安全特性 - **🔐 智能代码清理** - 自动检测和清理代码片段中的潜在安全问题 - **🎯 安全内容过滤** - 智能识别并处理危险的HTML标签和脚本内容 - **🧹 注释智能清理** - 支持批量清理残留的注释标记，解决删除不干净问题 - **📊 Base64安全编码** - 对包含特殊字符的代码使用安全编码处理 - **⚠️ 实时安全提示** - 在处理代码时提供详细的安全处理日志 - **🔒 多层防护机制** - 代码清理 + 安全编码 + 错误恢复 ### 🏗️ 技术架构 - **模块化设计** - 采用组件化架构，便于维护和扩展 - **TypeScript** - 完全使用TypeScript开发，类型安全 - **组件化UI** - 表单、列表、详情等UI组件独立封装 - **插件化字段** - 支持自定义表单字段类型扩展 - **多层安全防护** - 代码清理 + 安全编码 + 错误处理 ## 🚀 安装使用 ### 📦 安装方式 1. 在 VSCode 扩展市场搜索 "CodeMemo" 2. 点击安装并重新加载 VSCode 3. 侧边栏会出现 CodeMemo 图标 ### 📖 基本使用流程 #### 1. 📝 记录问题 1. 在编辑器中选中有问题的代码片段 2. 按 `Ctrl+Shift+P` 打开命令面板 3. 输入 "CodeMemo: 记录问题" 或使用快捷键 `Ctrl+Alt+Q` 4. 在弹出的表单中填写： - **问题描述**：遇到的具体问题（必填） - **解决方案**：对应的解决方法（必填） - **标签**：为记录添加分类标签（可选，最多6个） 5. 点击提交，系统会： - 自动检测并清理代码片段中的安全问题 - 在代码中插入注释标记 - 将记录添加到侧边栏 - 自动保存文件 > **🛡️ 安全处理说明**： > - 系统会自动检测代码片段中的潜在安全问题（如script标签、内联事件等） > - 危险内容会被智能清理或安全编码，确保不影响表单正常工作 > - 所有安全处理操作都会在调试日志中详细记录 > - 最终保存的是清理后的安全代码版本 > - 支持HTML、JavaScript、CSS等各种代码类型的安全处理 #### 2. 🏷️ 标签管理 - **添加标签**：在记录表单中输入标签，支持回车或逗号分隔 - **标签规则**： - 支持中文、英文、数字、下划线、连字符 - 单个标签最多20个字符 - 每条记录最多6个标签 - 自动去重和验证 - **标签显示**：列表中显示前3个标签，超出显示"+N" - **标签筛选**：点击标签可筛选相关记录 #### 3. 📊 管理记录 - **查看所有记录**：在侧边栏 CodeMemo 面板查看 - **查看详情**：点击记录项查看完整信息和所有标签 - **编辑记录**：点击记录的"编辑"按钮修改内容和标签 - **删除记录**：点击"删除"按钮，支持智能注释清理 - **智能删除**：自动检测并删除对应的代码注释 - **选择性删除**：可选择只删除记录而保留注释 - **批量清理**：删除失败时提供批量清理选项 - **代码跳转**：点击记录自动跳转到对应代码位置 ## 🎨 界面说明 ### 📋 侧边栏面板 ``` CodeMemo ├── 记录列表 │ ├── 问题标题 │ ├── 文件路径:行号 │ ├── 标签显示 (🏷️ tag1 tag2 +2) │ ├── 解决方案预览 │ └── 操作按钮 [📍][🔄][💬][✏️][🗑️] └── 刷新按钮 ``` ### 📱 详情面板 - **📊 记录信息**：ID、创建时间 - **🏷️ 标签展示**：所有标签以胶囊形式显示，支持点击筛选 - **📝 问题描述**：完整的问题说明，支持Markdown格式 - **💡 解决方案**：详细的解决步骤，支持Markdown格式 - **📍 文件位置**：记录关联的文件和行号 - **📝 相关代码**：记录时选中的代码片段（已安全处理） - **🔄 代码复制**：双击代码块可复制内容 ### 💬 代码注释格式 插件会根据文件类型自动选择注释格式： ```javascript // 🔗 CodeMemo记录 #1234: 数组越界问题 ``` ```python # 🔗 CodeMemo记录 #1234: 数组越界问题 ``` ```html ``` ```css /* 🔗 CodeMemo记录 #1234: 数组越界问题 */ ``` ## 🗂️ 支持的文件类型 | 文件类型 | 扩展名 | 注释格式 | 安全处理 | | --------------------- | ------------------------- | ---------- | -------- | | JavaScript/TypeScript | `.js` `.ts` `.jsx` `.tsx` | `//` | ✅ 智能 | | Python | `.py` | `#` | ✅ 智能 | | Java/C/C++ | `.java` `.c` `.cpp` `.h` | `//` | ✅ 智能 | | HTML/XML | `.html` `.xml` `.vue` | `` | ✅ 增强 | | CSS/SCSS/LESS | `.css` `.scss` `.less` | `/* */` | ✅ 智能 | | Shell | `.sh` `.bash` | `#` | ✅ 智能 | | 其他 | 所有其他文件 | `//` | ✅ 基础 | ## ⌨️ 快捷键 | 操作 | 默认快捷键 | 命令ID | 说明 | | -------- | ------------ | -------------------------- | ---------------------- | | 记录问题 | `Ctrl+Alt+Q` | `codememo.createRecord` | 快速记录代码问题 | | 刷新列表 | 无 | `codememo.refresh` | 刷新侧边栏记录列表 | | 清理注释 | 无 | `codememo.cleanupComments` | 清理当前文件的所有注释 | > **💡 使用技巧**: > - 选中代码后按 `Ctrl+Alt+Q` 即可快速打开记录表单 > - 可在 VSCode 设置 > 键盘快捷方式中自定义其他快捷键 > - 在编辑器聚焦时快捷键才会生效 > - 支持选择包含HTML标签、JavaScript代码等复杂内容 ### 🛠️ 自定义快捷键 1. 按 `Ctrl+Shift+P` 打开命令面板 2. 输入 "Preferences: Open Keyboard Shortcuts" 3. 搜索 "codememo" 找到相关命令 4. 点击命令旁的 ⚙️ 图标设置自定义快捷键 ## ⚙️ 配置选项 ### 📊 可配置项 | 配置项 | 类型 | 默认值 | 说明 | | ------------------------------------ | ------- | -------- | --------------------------------------------- | | `codememo.showDebugInfo` | boolean | false | 是否在 WebView 中显示调试信息 | | `codememo.clearPanelsOnStartup` | boolean | true | 启动时是否清理之前打开的详情面板 | | `codememo.allowMultipleDetailPanels` | boolean | false | 是否允许同时打开多个详情面板 | | `codememo.securityMode` | string | moderate | 代码安全处理模式 (strict/moderate/permissive) | ### 🔧 配置方式 1. 按 `Ctrl+,` 打开设置 2. 搜索 "codememo" 3. 修改相应配置项 ### 🛡️ 安全模式说明 - **strict（严格）**：移除所有可能的危险内容，最大安全性 - **moderate（温和）**：只移除明确危险的内容，平衡安全和可用性 **(推荐)** - **permissive（宽松）**：主要用于代码展示，最小干预 ## 💡 使用技巧 ### 🎯 最佳实践 - **🎯 精准选择**：记录时选中最相关的代码片段 - **📝 详细描述**：问题描述越详细，后期回顾越有帮助 - **🏷️ 合理标签**：使用一致的标签体系，如：bug、优化、学习、TODO等 - **⏰ 及时记录**：遇到问题立即记录，避免遗忘细节 - **🧹 定期清理**：删除已解决且不再需要的记录 ### 🛡️ 安全使用建议 - **代码片段选择**：可以放心选择包含HTML、JavaScript等内容的代码片段 - **安全日志查看**：启用调试模式查看详细的安全处理日志 - **清理确认**：删除记录时注意选择合适的删除方式 - **批量清理**：如发现注释清理不完整，可使用批量清理功能 ### 🏷️ 标签策略建议 ``` 分类标签: bug, feature, refactor, docs, security 优先级: high, medium, low 状态: todo, doing, done 技术栈: react, vue, node, python, html, css, js 场景: frontend, backend, database, api ``` ### 🔄 工作流建议 ``` 发现问题 → 选中代码 → 添加标签 → 记录问题 → 研究解决 → 更新方案 → 验证完成 ``` ### 👥 团队协作 - **🏠 本地存储**：记录存储在工作区本地，不会影响团队成员 - **📝 代码注释**：注释会同步到版本控制，团队可见 - **🎯 选择性提交**：可选择性提交包含注释的代码 - **📊 统一标签**：团队可约定统一的标签规范 ## 🛠️ 故障排除 ### ❓ 常见问题 **Q: 记录没有保存怎么办？** A: 插件会自动保存，如遇问题请检查文件权限或重启 VSCode **Q: 标签输入无响应？** A: 确保标签符合规则（中文、英文、数字、下划线、连字符），长度不超过20字符 **Q: 注释格式不正确？** A: 插件根据文件扩展名自动判断，确保文件保存时有正确的扩展名 **Q: 侧边栏没有显示记录？** A: 点击刷新按钮，或重新打开工作区 **Q: 删除记录后注释还在？** A: 使用新的智能删除功能，或运行"清理注释"命令批量清理 **Q: 标签显示不全？** A: 列表中最多显示3个标签，完整标签请在详情面板查看 **Q: 表单页面异常或无法显示？** A: 新版本已解决包含特殊字符代码片段导致的表单异常问题 **Q: 选择包含script标签的代码时出现问题？** A: ✅ **已解决** - 系统会自动清理和安全编码危险内容，确保表单正常工作 **Q: 如何查看代码的安全处理日志？** A: 启用调试模式（`codememo.showDebugInfo: true`），在表单中查看处理日志 **Q: 代码片段被修改了？** A: 为确保安全，系统会清理危险内容。所有修改都有详细日志记录 ### 🧹 注释清理功能 如果发现注释删除不干净，可以使用以下方法： #### 方法1：智能删除（推荐） 1. 在侧边栏点击记录的删除按钮 2. 选择"确定"进行智能删除 3. 系统会自动检测并删除对应注释 #### 方法2：批量清理 1. 按 `Ctrl+Shift+P` 打开命令面板 2. 输入 "CodeMemo: 清理文件注释" 3. 确认清理当前文件的所有CodeMemo注释 #### 方法3：选择性删除 1. 删除记录时选择"只删除记录（保留注释）" 2. 手动删除代码中的注释 ### 🔍 调试模式 启用调试模式可以查看详细的处理过程： 1. 打开VSCode设置 2. 搜索"codememo.showDebugInfo" 3. 设置为true 4. 重新加载窗口 ### 🔄 重置插件 如需重置所有数据： 1. 按 `Ctrl+Shift+P` 打开命令面板 2. 输入 "Developer: Reload Window" 3. 或者关闭工作区重新打开 ## 🏗️ 技术架构 ### 📦 项目结构 ``` src/ ├── extension.ts # 插件入口 ├── recordViewProvider.ts # 记录列表提供器 ├── commands/ # 命令处理 ├── services/ # 业务服务 │ ├── recordService.ts # 记录管理 │ ├── commentService.ts # 注释处理（智能清理） │ └── detailPanelService.ts # 详情面板 ├── ui/ # UI组件 │ ├── recordList/ # 记录列表组件 │ ├── detailPanel/ # 详情面板组件 │ └── forms/ # 表单系统 │ ├── components/ # 字段组件 │ ├── templates/ # 模板系统 │ └── utils/ # 工具函数 │ ├── htmlUtils.ts # HTML安全处理 │ ├── codeSanitizer.ts # 代码清理器 │ ├── configValidator.ts # 配置验证 │ └── logger.ts # 日志系统 ├── types/ # 类型定义 ├── utils/ # 工具函数 └── constants/ # 常量定义 ``` ### 🔧 核心特性 - **模块化设计**：各功能模块独立，便于维护 - **组件化UI**：表单字段支持插件化扩展 - **类型安全**：完全TypeScript，编译时类型检查 - **性能优化**：延迟加载、组件复用 - **安全机制**：多层安全防护，智能代码清理 - **错误恢复**：全面的错误处理和降级机制 ### 🛡️ 安全架构 ``` 输入代码片段 ↓ 🔍 智能检测（类型识别、威胁分析） ↓ 🧹 代码清理（移除危险内容） ↓ 🔐 安全编码（Base64编码特殊内容） ↓ 📝 表单渲染（安全显示） ↓ 💾 安全存储（清理后的代码） ``` ## 📝 更新日志 ### v1.1.0 (当前版本) - 🛡️ **重大更新**：新增智能代码安全处理系统 - 🔐 **安全特性**：自动检测和清理危险的HTML/JavaScript内容 - 🧹 **注释清理**：增强的注释删除和批量清理功能 - 📊 **Base64编码**：对特殊字符内容使用安全编码 - ⚠️ **安全日志**：详细的安全处理过程记录 - 🔧 **智能删除**：更准确的注释匹配和删除算法 - 🎯 **错误恢复**：全面的错误处理和降级机制 - 📱 **UI增强**：优化表单界面和用户反馈 ### v1.0.1 - ✨ 初始版本发布 - 📝 基础记录功能 - 🏷️ 标签分类系统 - 📊 侧边栏界面 - 📱 详情面板 - 💾 自动保存机制 - 🏗️ 模块化架构重构 ### 🚀 计划功能 - 🔍 高级标签筛选和搜索 - 📊 统计面板和数据分析 - 📤 导出/导入功能 - 🎨 主题定制 - 📄 更多文件格式支持 - 🤖 AI辅助问题分析 ## 🤝 贡献与反馈 - **🐛 Bug 报告**：请在 GitHub Issues 中提交 - **💡 功能建议**：欢迎在 Discussions 中讨论 - **🔧 代码贡献**：请提交 Pull Request - **📖 文档改进**：欢迎改进文档和示例 - **🛡️ 安全问题**：请通过邮件私下报告安全漏洞 ## 📄 许可证 MIT License - 详见 LICENSE 文件 --- **🎉 享受更安全、更高效的代码记录体验！** > 💡 **提示**：新版本解决了代码片段包含特殊字符时的各种问题，现在可以安全地记录任何类型的代码片段！