企业官网建设流程全解析

在 VS Code 中探索 code-review-graph 代码图谱：Code Graph 面板与五大核心命令实战

【免费下载链接】code-review-graphLocal-first code intelligence graph for MCP and CLI. Builds a persistent map of your codebase so AI coding tools read only what matters, with benchmarked context reductions on reviews and large-repo workflows.项目地址: https://gitcode.com/GitHub_Trending/co/code-review-graph

本指南以 VS Code 扩展内置的入门向导explore步骤（explore.md）为核心脉络，系统讲解如何在活动栏的Code Graph面板中浏览代码库结构，并逐条深入剖析向导推荐的五大命令（Show Blast Radius、Find Callers、Find Tests、Search、Show Graph）。读完本文，你将掌握从图谱构建、结构浏览到影响面分析、测试定位、交互式可视化的完整探索工作流，并理解每个命令在源码层的真实查询逻辑。

一、探索前置：先有图谱，才有探索

explore.md位于扩展的"三步走"欢迎向导（walkthrough）中的最后一步，前两步分别是安装 CLI 与构建图谱（见 package.json 中walkthroughs.codeReviewGraph.welcome.steps的定义）。因此，在打开 Code Graph 面板之前，需要先完成两件事：

1. 安装 Python 后端 CLI（对应 install.md）：
   • 环境要求：Python 3.10+
   • 推荐使用uv：uv pip install code-review-graph
   • 备选方式：pipx install code-review-graph或pip install code-review-graph
2. 构建图谱数据库：执行Code Graph: Build Graph命令，让 CLI 解析当前工作区并生成 SQLite 图谱数据库。

扩展激活后会在工作区查找.code-review-graph/graph.db（回退到.code-review-graph.db），找到后即初始化SqliteReader并以只读方式打开数据库（见 extension.ts 中findGraphDb与activate的逻辑）。扩展还通过文件系统监视器监听**/.code-review-graph/graph.db的变化，外部（如 CLI 或守护进程）重建数据库后视图会自动刷新。

提示：Python 后端负责写入图谱（解析、构建、增量更新），VS Code 扩展侧采用better-sqlite3以只读模式打开数据库并执行查询，二者职责分离（见 sqlite.ts 顶部注释）。图谱数据按 schema v9 组织为nodes/edges等表，扩展在加载时会做 schema 兼容性检查，若数据库版本过新会提示重建（checkSchemaCompatibility）。

二、打开 Code Graph 面板

完成前置步骤后，点击 VS Code 活动栏（Activity Bar）中的Code Graph图标即可打开面板。该面板由扩展在contributes.viewsContainers.activitybar中注册（图标为media/icons/graph.svg），内部包含三个并列视图（见 package.json 的views.codeReviewGraph）：

Code Graph 视图的树状结构由CodeGraphTreeProvider实现（见 treeView.ts）：

• 根级：按字母序排列的所有文件节点（File类型）；
• 文件级：该文件内按行号排序的符号节点（函数、类、类型、测试等，过滤掉File节点）；
• 符号级：该符号的出边（outgoing）与入边（incoming），每条边展示类型（如CALLS、IMPORTS_FROM、INHERITS、TESTED_BY）以及指向的具体位置。

右键任意符号节点，上下文菜单会直接提供 Show Blast Radius、Find Callers、Find Callees、Find Tests、Show Graph 五个快捷操作（menus.view/item/context，条件为viewItem =~ /node-/）。

三、五大核心命令逐条详解

向导explore.md明确推荐通过命令面板（Ctrl+Shift+P）尝试以下五条命令。下面结合源码逐一展开其行为与原理。

1. Code Graph: Show Blast Radius —— 改动影响面分析

• 命令 ID：codeReviewGraph.showBlastRadius
• 作用：查看"改了某处代码，会影响哪些调用方/被依赖方"。

完整实现位于 blastRadius.ts 的registerBlastRadiusCommand，调用链路为：

1. 取当前活动编辑器的文件路径与光标行（VS Code 行号 0 基 → 转换为 1 基）；
2. 通过reader.getNodeAtCursor(filePath, line)解析光标所在的最内层节点——SQL 以line_start <= line AND line_end >= line过滤并按line_end - line_start升序取第一条，即跨度最小（最精确）的符号；
3. 若未命中具体符号，则回退到文件级节点；
4. 读取配置codeReviewGraph.blastRadiusDepth（默认 2，范围 1–10）作为 BFS 深度；
5. 调用reader.getImpactRadius([filePath], depth)计算影响半径；
6. 将结果写入 Blast Radius 树视图并聚焦该视图，同时弹出信息提示（如"Blast radius: N nodes impacted across M files"）。

getImpactRadius的 BFS 实现位于 sqlite.ts，与 Python 端GraphStore.get_impact_radius逻辑保持一致：

• 以变更文件内的所有节点为种子集合；
• 每一跳同时沿出边（我影响谁）与入边（谁依赖我）双向扩展；
• 最多扩展maxDepth跳，收集所有受影响节点（不含种子）、受影响文件以及全部相关边。

这意味着"blast radius"并非只覆盖调用链，还包括反向依赖（如基类变化波及所有子类、公共函数变化波及全部调用方），是一个完整的双向影响闭包。

2. Code Graph: Find Callers —— 反向调用查询

• 命令 ID：codeReviewGraph.findCallers
• 作用：找出所有调用某个函数的地方。

实现位于 navigation.ts 与 extension.ts 两处（行为一致）：

1. 通过resolveNodeAtCursor(reader)解析光标处节点（见 cursorResolver.ts：读取活动编辑器路径与光标行，映射为 1 基行号后调用getNodeAtCursor）；
2. 查询该节点入边（getEdgesByTarget），过滤kind === 'CALLS'的边；
3. 将每个调用方解析为完整节点信息（名称、文件、行号），通过showQuickPick弹出候选列表；
4. 选中后调用navigateToNode打开对应文件并定位到调用处行首。

3. Code Graph: Find Tests —— 测试用例定位

• 命令 ID：codeReviewGraph.findTests
• 作用：找到覆盖某个函数的全部测试。

实现同样位于 navigation.ts，其查找策略比单纯查询TESTED_BY边更稳健，采用三层回退：

1. 入边：getEdgesByTarget中kind === 'TESTED_BY'的边（边方向为 被测节点 → 测试 时取源端）；
2. 出边：getEdgesBySource中kind === 'TESTED_BY'的边（取目标端），兼容两种记录方向；
3. 命名约定：按test_{name}与Test{name}两种模式调用searchNodes，若命中isTest或kind === 'Test'的节点则一并纳入。

汇总去重后以 QuickPick 展示，选择后可跳转到测试函数定义处。

4. Code Graph: Search —— 全图谱模糊搜索

• 命令 ID：codeReviewGraph.search
• 作用：跨整个图谱按名称搜索函数、类、文件、类型。

在 extension.ts 中，该命令弹出输入框后调用sqliteReader.searchNodes(query)返回匹配列表，每项展示name / kind / filePath:lineStart，选中后跳转。

另有增强版实现在 search.ts：使用createQuickPick实现边输入边过滤的实时搜索：

• 输入变化经过 100ms 防抖后调用reader.searchNodes(value, 20)（限制最多 20 条）；
• 结果按节点类型映射 VS Code codicon 图标：Function →$(symbol-method)、Class →$(symbol-class)、File →$(file)、Test →$(beaker)、Type →$(symbol-interface)；
• 支持matchOnDescription/matchOnDetail，可在文件路径等字段上继续过滤。

底层searchNodes使用 SQLLIKE '%query%'同时匹配name与qualified_name两列（见 sqlite.ts），因此既可按短名（如parse）也可按限定名（如my_module.my_class.my_method）检索。

5. Code Graph: Show Graph —— 交互式图谱可视化

• 命令 ID：codeReviewGraph.showGraph
• 作用：打开基于 D3.js 的交互式图谱可视化 Webview。

实现位于 graphWebview.ts（前端渲染脚本为 webview/graph.ts）。触发后会加载当前SqliteReader的全部节点与边，以力导向图的形式呈现代码依赖关系，支持缩放、拖拽、节点点击跳转到源码位置（codeReviewGraph.revealInTree命令负责在图与源码间联动高亮）。

该视图受以下配置项控制（见 package.json 的configuration）：

四、让探索更高效的配套能力

除了向导点名的五条命令，同一面板生态中还提供了与探索深度互补的能力：

• Code Graph: Find Callees（codeReviewGraph.findCallees）：当前节点出边中的CALLS边，即"这个函数调用了谁"，与 Find Callers 构成双向调用导航。
• Code Graph: Find Large Functions（codeReviewGraph.findLargeFunctions）：按行数阈值（默认 50 行，可自定义）找出超大函数，对应getNodesBySize按line_end - line_start + 1降序排序的实现。
• Code Graph: Query Graph（codeReviewGraph.queryGraph）：将 8 种查询模式（callers_of、callees_of、imports_of、importers_of、children_of、tests_for、inheritors_of、file_summary）封装为图形化向导，每种模式映射到边类型与方向（如inheritors_of→INHERITS入边），命中多结果时先经搜索消歧再展示。
• Code Graph: Review Changes（codeReviewGraph.reviewChanges）：结合git diff --name-only HEAD与--cached收集变更文件，计算影响半径后在输出面板给出评审提示——包括无测试覆盖的函数告警、跨文件影响面过宽告警（>10 个文件）、继承链受影响告警，并同步更新图谱与 SCM 文件装饰。
• Code Graph: Compute Embeddings：为图谱节点计算语义嵌入（需要code-review-graph[embeddings]依赖），是后续语义检索的基础。

此外，SCM 文件装饰（scmDecorations.ts）会在资源管理器和源代码管理视图中为文件打上徽章：橙色圆点表示"处于当前变更的 blast radius 内"、绿色 ✓ 表示"变更函数均有测试覆盖"、红色!表示"变更函数缺少测试覆盖"，让你在浏览文件时直接感知影响与覆盖状态。

五、探索工作流的推荐节奏

综合以上能力，一条高效的探索路径可以是：

1. 构建/更新图谱：首次使用执行Code Graph: Build Graph；日常开发可依赖autoUpdate（默认开启，保存文件 2 秒防抖后增量更新）或Code Graph: Watch Mode（后台监听文件变化持续更新）。
2. 整体感知：打开 Code Graph 面板按文件浏览结构，或执行Code Graph: Show Graph查看全局依赖图。
3. 定点查询：将光标置于目标函数，依次执行 Find Callers（谁调我）、Find Callees（我调谁）、Find Tests（谁测我）。
4. 影响评估：对改动处执行 Show Blast Radius，或在改动后直接执行 Review Changes 获得结构化评审指引。
5. 快速定位：记不清符号名时，用 Search 输入关键字（支持实时过滤与类型图标），一键跳到定义处。

说明：所有扩展命令在未找到图谱数据库时会提示 "No graph database loaded"，因此请先确认工作区已构建过图谱；多根工作区（multi-root）下扩展会优先选择包含graph.db的文件夹（见 extension.ts 的getWorkspaceRoot）。

六、继续深入

• 完整命令清单与右键菜单、配置项定义见 code-review-graph-vscode/package.json；
• 查询层（BFS 影响半径、边查询、统计、schema 校验）见 sqlite.ts；
• 命令注册与激活流程、数据库监视与自动更新见 extension.ts；
• 面板三视图的数据提供逻辑见 treeView.ts；
• Python 后端的安装方式与构建/更新/守护等 CLI 用法，可结合扩展内另一份向导文档 install.md 以及仓库根目录的 README.md 与 docs/USAGE.md 一起阅读。

【免费下载链接】code-review-graphLocal-first code intelligence graph for MCP and CLI. Builds a persistent map of your codebase so AI coding tools read only what matters, with benchmarked context reductions on reviews and large-repo workflows.项目地址: https://gitcode.com/GitHub_Trending/co/code-review-graph