代码笔记助手

记录代码相关笔记时，AI 帮助解释代码、生成文档、分析错误，提升编程学习效率。

适用场景

• 学习新编程语言
• 记录代码片段和解决方案
• Debug 排错
• 代码审查和优化

前置准备

必需插件

插件	用途	安装方式
Text Generator	AI 代码分析	社区插件市场
Code Editor	代码编辑增强	社区插件市场

推荐插件

插件	用途
Code Styler	代码样式美化
Syntax Highlight	语法高亮

功能矩阵

功能	用途	Prompt 示例
代码解释	理解复杂代码	"解释这段代码的逻辑"
文档生成	生成函数文档	"生成 JSDoc 注释"
错误分析	排查问题	"分析这个错误的原因"
代码重构	优化代码	"重构这段代码使其更清晰"
测试生成	生成测试用例	"为这个函数生成测试"

代码笔记模板

---
title: {{code_topic}}
language: {{language}}
tags: [code, {{language}}]
---

# {{code_topic}}

## 📝 问题描述
<!-- 遇到的问题或学习目标 -->

## 💻 代码

## 🤖 AI 解释
<!-- AI 生成的代码解释 -->

## 💡 我的理解
<!-- 个人理解 -->

## 🔗 相关资源
- [[]]

代码解释 Prompt

# 代码解释

## 代码
```{{language}}
{{code}}
```text

## 解释要求

### 输出格式

## 概述
[一句话说明代码的作用]

## 详细解释
[逐行或逐块解释]

### 关键点
1. 要点1
2. 要点2

### 时间复杂度
[分析]

### 空间复杂度
[分析]

## 改进建议
1. 建议1
2. 建议2

## 相关概念
- 概念1：解释
- 概念2：解释

错误分析 Prompt

# 错误分析

## 代码

## 错误信息

## 分析要求
1. 错误原因分析
2. 可能的解决方案（按优先级）
3. 最佳实践建议
4. 预防措施

返回

← 返回案例目录

详细操作步骤

步骤一：创建代码笔记工作流

// QuickAdd 宏：快速记录代码片段
async function quickCodeNote() {
  const language = await suggestLanguage();
  const code = await getClipboard(); // 从剪贴板获取代码
  const description = await prompt("描述这段代码的用途");
  
  const explanation = await textGenerator.generate(`
    解释以下 ${language} 代码：
    
    \`\`\`${language}
    ${code}
    \`\`\`
    
    要求：
    1. 简洁说明代码功能
    2. 逐行解释关键逻辑
    3. 时间/空间复杂度
    4. 改进建议
  `);
  
  await createNote({
    title: `代码笔记 - ${description}`,
    content: generateCodeTemplate(code, explanation, language)
  });
}

步骤二：配置代码片段模板

---
title: {{title}}
language: {{language}}
created: {{date}}
tags: [code, {{language}}]
---

# {{title}}

## 问题描述
{{problem}}

## 解决方案

```{{language}}
{{code}}

代码解释

关键知识点

• [[知识点1]]
• [[知识点2]]

相关资源

• 官方文档
• [[相关笔记]]

### 步骤三：设置快捷命令

```yaml
# 快捷键配置
命令："解释选中代码"
快捷键：Ctrl+Shift+E

命令："生成测试用例"
快捷键：Ctrl+Shift+T

命令："代码重构建议"
快捷键：Ctrl+Shift+R

高级技巧

1. 多语言代码解释

# 代码解释 Prompt（增强版）

## 代码
```{{language}}
{{code}}

解释要求

基本信息

• 语言：
• 类型：[算法/工具函数/类定义/API调用]
• 用途：[一句话描述]

详细解释

1. 整体逻辑流程
2. 关键函数/方法说明
3. 数据结构使用
4. 设计模式识别

性能分析

• 时间复杂度：O(?)
• 空间复杂度：O(?)
• 优化机会：[...]

最佳实践

• ✅ 好的实践
• ⚠️ 需要注意的点
• ❌ 应该避免的写法

相关知识点

• 前置知识：[...]
• 扩展阅读：[...]

### 2. 错误诊断助手

```javascript
// 智能错误分析
async function analyzeError(code, errorMessage) {
  return await textGenerator.generate(`
    作为资深开发者，分析以下代码错误：

    代码：
    \`\`\`
    ${code}
    \`\`\`

    错误信息：
    \`\`\`
    ${errorMessage}
    \`\`\`

    请提供：
    1. 错误原因（可能有多层）
    2. 修复方案（按推荐程度排序）
    3. 相关代码片段修正
    4. 预防措施
    5. 相关学习资源
  `);
}

3. 代码对比笔记

---
title: 实现对比 - {{feature}}
---

# {{feature}} 实现对比

## 方案 A
```{{language}}
{{code_a}}

优点：

• ...

缺点：

• ...

方案 B

{{code_b}}

优点：

• ...

缺点：

• ...

AI 对比分析

对比以上两种实现方案，分析：
1. 性能差异
2. 可读性
3. 可维护性
4. 适用场景
5. 推荐方案

## 常见问题

### Q1: AI 解释不够准确？

**优化方案：**

```markdown
# 提供更多上下文

## 代码
{{code}}

## 上下文
- 项目类型：[Web应用/API服务/数据处理...]
- 使用框架：[React/Vue/Express...]
- 业务场景：[用户登录/支付流程...]

## 问题
{{specific_question}}

## 要求
1. 结合上下文解释
2. 指出潜在的框架特性使用
3. 提供符合项目规范的修改建议

Q2: 如何管理大量代码片段？

方案：建立代码库索引

# CodeSnippets/索引.md

## 按语言分类
### JavaScript
- [[JS-防抖函数]]
- [[JS-深拷贝实现]]

### Python
- [[Python-装饰器模式]]
- [[Python-异步处理]]

## 按用途分类
### 数据处理
- [[数据清洗工具函数]]
- [[JSON处理封装]]

### UI 组件
- [[Modal 组件封装]]
- [[表单验证工具]]

Q3: 如何生成单元测试？

# 测试生成 Prompt

## 待测试代码
```{{language}}
{{code}}

测试要求

• 测试框架：[Jest/PyTest/JUnit...]
• 覆盖率目标：>80%
• 测试类型：单元测试

输出格式

1. 正常用例
2. 边界用例
3. 异常用例
4. Mock 数据

## 实际案例

### 案例：学习 React Hooks

```markdown
## 学习笔记：useEffect

### 基础用法
```javascript
useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理函数
  };
}, [dependencies]);

AI 解释

概述： useEffect 用于在函数组件中执行副作用操作。

执行时机：

• 组件挂载后
• 依赖更新后
• 组件卸载前（清理函数）

依赖数组说明：

• [] - 只在挂载时执行
• [dep] - dep 变化时执行
• 无数组 - 每次渲染都执行

常见陷阱：

1. 忘记清理订阅
2. 依赖数组遗漏
3. 在 effect 中直接修改 state

实践案例

• [[useEffect-数据获取]]
• [[useEffect-事件监听]]

### 效率提升

| 任务 | 手动 | AI 辅助 |
|------|------|---------|
| 理解复杂代码 | 30分钟 | 5分钟 |
| 生成文档 | 15分钟 | 1分钟 |
| 错误诊断 | 1小时 | 10分钟 |
| 生成测试 | 30分钟 | 5分钟 |