ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Code Review Graph VS Code 扩展使用指南:在编辑器中可视化代码依赖图、爆炸半径与审查上下文

Code Review Graph VS Code 扩展使用指南:在编辑器中可视化代码依赖图、爆炸半径与审查上下文 Code Review Graph VS Code 扩展使用指南在编辑器中可视化代码依赖图、爆炸半径与审查上下文【免费下载链接】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 扩展 code-review-graph-vscode/README.md 展开完整讲解如何安装后端 CLI、构建代码图谱以及如何利用扩展提供的树视图、交互式 D3 图、爆炸半径分析与代码审查辅助功能直接在 VS Code 内完成依赖追踪与变更影响评估。读完本文你将掌握从零搭建代码图环境、熟练使用全部 13 条命令、按需调优全部设置项并理解其背后的 SQLite 图存储与 BFS 影响传播原理。一、扩展是什么本地优先的代码智能图谱前端Code Review Graph 是一个面向 VS Code 的本地优先local-first扩展它把 Python 后端code-review-graph解析出的持久化代码图谱包含文件、类、函数、类型、测试等节点及其调用、导入、继承等关系以可浏览、可查询、可可视化的形式呈现在编辑器里。其核心定位来自项目描述让 AI 编码工具和人类开发者只读取真正重要的代码通过图结构精确回答改了这段代码会影响谁这个函数被谁调用这个符号有没有测试覆盖等问题。在package.jsoncode-review-graph-vscode/package.json中扩展声明了三类 Activity Bar 视图视图 ID名称职责codeReviewGraph.codeGraphCode Graph按 文件 → 符号 → 关系边 分层的代码图浏览器codeReviewGraph.blastRadiusBlast Radius展示变更涉及的 changed / impacted 两类节点分组codeReviewGraph.statsStats图数据库统计总览文件数、节点数、边数、语言、更新时间、嵌入数三个视图均由 code-review-graph-vscode/src/views/treeView.ts 中的CodeGraphTreeProvider、BlastRadiusTreeProvider、StatsTreeProvider三个TreeDataProvider驱动数据全部来自本地 SQLite 图库无需联网。二、核心功能总览原 README 列出的能力可归纳为以下 12 项每一项都有对应源码支撑Code Graph Explorer代码图浏览器树视图浏览文件、类、函数及其关系展开符号节点可直接查看其出边outgoing与入边incoming并在图上过滤CONTAINS噪音边见CodeGraphTreeProvider.getSymbolChildren。Blast Radius爆炸半径查看修改代码后会影响的文件与符号深度由blastRadiusDepth控制1–10。Review Changes审查变更自动检测 git 变更并计算其爆炸半径生成包含测试覆盖缺口、宽爆炸半径、继承链影响等提示的审查指引见extension.ts中codeReviewGraph.reviewChanges命令实现。Find Callers / Callees查找调用者/被调者沿CALLS边双向追踪任意函数的调用关系。Find Tests查找测试通过TESTED_BY边定位任一符号的测试同时兼容正反两个方向。Query Graph图查询以 8 种语义模式callers_of、callees_of、imports_of、importers_of、children_of、tests_for、inheritors_of、file_summary查询图数据库。Find Large Functions查找大函数找出超过行数阈值的函数或类阈值在命令弹窗中自定义默认 50 行。Interactive Graph交互式图基于 D3.js 的力导向依赖关系可视化支持搜索、边过滤、深度滑块与 SVG/PNG 导出。Live Search实时搜索对name/qualified_name字段做 SQLLIKE模糊搜索结果即时弹出并可直接跳转源码见SqliteReader.searchNodes。Compute Embeddings计算嵌入调用后端embed命令为全部节点生成向量嵌入供语义搜索使用。Watch Mode监视模式启动后端watch守护进程持续监听文件变化并更新图。Auto-Update自动更新保存文件后在后台重建图默认启用带 2000ms 防抖见setupAutoUpdate中的AUTO_UPDATE_DEBOUNCE_MS。三、架构VS Code 前端 Python 后端 CLI SQLite 图库扩展遵循清晰的前端只读、后端写库分层后端 CLIPython负责解析代码库、写入图数据库。扩展通过CliWrappercode-review-graph-vscode/src/backend/cli.ts以子进程方式调用code-review-graph可执行文件对应build、update、watch、embed四个子命令单次 CLI 调用超时上限为 60 秒CLI_TIMEOUT_MS。SQLite 图库后端产物为本地数据库.code-review-graph/graph.db。扩展用better-sqlite3以只读模式打开new Database(dbPath, { readonly: true })见 code-review-graph-vscode/src/backend/sqlite.ts所有写入均由 Python 侧完成同时设置 WAL 日志模式与 5 秒忙等待超时保证与后端并发读写安全。多工作区支持getWorkspaceRoot()会优先选择含图数据库的工作区文件夹找不到才回退到第一个文件夹findGraphDb()依次探测.code-review-graph/graph.db与旧版.code-review-graph.db两个位置。从源码结构看扩展内部还包含一个FileSystemWatcherwatchGraphDb监听**/.code-review-graph/graph.db的变化数据库被外部重建、创建或删除时自动重开SqliteReader并刷新树视图实现后端改库、前端即时感知的联动。节点与边的类型模型SqliteReadercode-review-graph-vscode/src/backend/sqlite.ts定义了完整的图数据模型节点类型5 种File、Class、Function、Type、Test。每个节点携带qualified_name全局限定名如my_module.MyClass.my_method、file_path、line_start/line_end、params、return_type、is_test等元数据。边类型7 种CALLS调用、IMPORTS_FROM导入、INHERITS继承、IMPLEMENTS实现、CONTAINS包含、TESTED_BY被测试、DEPENDS_ON依赖。边同时记录source_qualified、target_qualified、所在file_path与行号这正是任意符号可溯源到具体代码行的数据基础。四、快速开始三步建立你的代码图谱第 1 步安装扩展从 VS Code Marketplace 安装Code Review Graph扩展。激活条件activationEvents包括工作区存在.code-review-graph/graph.db、执行任何codeReviewGraph.*命令或打开对应视图因此图库就绪后扩展会自动加载。第 2 步安装后端 CLI扩展本身不解析代码必须安装 Python 后端code-review-graph要求 Python 3.10# 推荐 uv pip install code-review-graph # 备选 pipx install code-review-graph pip install code-review-graph扩展的Installercode-review-graph-vscode/src/onboarding/installer.ts会在后端缺失时弹出提示支持一键自动安装或打开终端展示手动安装命令自动安装时按uv → pipx → pip3的优先级探测可用安装器CliWrapper.detectPythonInstaller。若系统中不存在 Python 3.10会引导下载安装 Python。第 3 步构建图按CtrlShiftP打开命令面板执行Code Graph: Build Graph。扩展会在工作区根目录生成图数据库.code-review-graph/graph.db并在文件保存时自动更新autoUpdate默认开启。构建成功后状态栏会显示节点总数如$(database) 12,345 nodes点击状态栏即可手动触发Code Graph: Update Graph见 code-review-graph-vscode/src/views/statusBar.ts若图库超过 1 小时未更新状态栏会以$(warning) Code Graph: Outdated提醒你及时增量更新。提示CliWrapper.buildGraph支持--full参数执行全量重建默认的build会按需增量update子命令则专门做增量更新code-review-graph-vscode/src/backend/cli.ts。五、命令全览与源码级行为说明扩展在package.json的contributes.commands中注册了 13 条命令与 README 的命令表完全一致CommandDescriptionCode Graph: Build GraphParse the codebase and create the graph databaseCode Graph: Update GraphIncrementally update the graphCode Graph: Show Blast RadiusShow the blast radius for a symbolCode Graph: Review ChangesAnalyze git changes and show impacted filesCode Graph: Find CallersFind all callers of a functionCode Graph: Find CalleesFind all functions called by a targetCode Graph: Find TestsFind tests for a symbolCode Graph: Find Large FunctionsFind functions/classes exceeding a size thresholdCode Graph: Query GraphRun semantic queries (8 patterns: callers_of, callees_of, etc.)Code Graph: SearchSearch the code graphCode Graph: Show GraphOpen the interactive graph visualizationCode Graph: Compute EmbeddingsGenerate vector embeddings for semantic searchCode Graph: Watch ModeRun graph in watch mode for continuous updates结合 code-review-graph-vscode/src/extension.ts 中的registerCommands各命令的实际行为如下Build Graph解析代码库并创建图库成功后重开SqliteReader并刷新所有树视图失败时在通知中显示 CLI 的stderr。Update Graph以进度通知包裹增量更新过程失败时提示错误信息。Show Blast Radius接受参数或手动输入限定名如my_module.MyClass.my_method按blastRadiusDepth深度计算影响半径随后聚焦到 Blast Radius 视图。Find Callers / Find Callees分别以目标为入边/出边过滤CALLS边弹出showQuickPick列表显示符号名、文件、行号选中即可跳转源码。Find Tests同时检索入边与出边的TESTED_BY关系兼容测试指向被测函数与被测函数指向测试两种存储方向。Find Large Functions弹出阈值输入框默认 50调用getNodesBySize(minLines)按line_end - line_start 1倒序返回超过阈值的节点最多 50 条。Query Graph先让用户选择 8 种模式之一再输入目标内部将模式映射为边类型 方向见下节先精确匹配限定名失败则降级为模糊搜索并在多结果时弹出选择器。Search对name/qualified_name做LIKE模糊搜索searchNodes结果含类型与filePath:lineStart一键跳转。Show Graph打开/聚焦 D3 交互式图面板GraphWebviewPanel.createOrShow。Compute Embeddings调用后端embed若输出包含 not installed会提示安装code-review-graph[embeddings]可选依赖。Watch Mode调用后端watch启动持续监听。Review Changes见下文审查工作流专节。Query Graph 的 8 种查询模式命令的查询映射表定义在 code-review-graph-vscode/src/extension.tsqueryMap完整对应关系如下模式底层边类型方向语义callers_ofCALLSincoming谁调用了目标callees_ofCALLSoutgoing目标调用了谁imports_ofIMPORTS_FROMoutgoing文件导入了哪些模块importers_ofIMPORTS_FROMincoming谁从目标导入children_ofCONTAINSoutgoing文件/类包含哪些节点tests_forTESTED_BYincoming目标的测试inheritors_ofINHERITSincoming谁继承/实现了目标file_summaryCONTAINSoutgoing文件内全部节点清单注意树视图为了保持简洁会隐藏CONTAINS边但 Query Graph 的children_of/file_summary模式专门用于显式查询这类包含关系二者互补。六、设置项详解10 项配置的参数、默认值与底层影响扩展在package.json的contributes.configuration中声明了全部设置与 README 的设置表一一对应SettingDefaultDescriptioncodeReviewGraph.cliPathPath to the CLI binary. Leave empty to use the bundled version or one found onPATH.codeReviewGraph.autoUpdatetrueAuto-update the graph on file save.codeReviewGraph.blastRadiusDepth2Max traversal depth for blast radius (1–10).codeReviewGraph.graphThemeautoGraph color theme:auto,light, ordark.codeReviewGraph.graph.maxNodes500Max nodes in the graph visualization (10–5000).codeReviewGraph.graph.defaultEdgesAll exceptCONTAINSEdge types shown by default.codeReviewGraph.treeView.showFilestrueShow file nodes in the tree view.codeReviewGraph.treeView.showClassestrueShow class nodes in the tree view.codeReviewGraph.treeView.showFunctionstrueShow function nodes in the tree view.codeReviewGraph.treeView.showTypestrueShow type nodes in the tree view.codeReviewGraph.treeView.showTeststrueShow test nodes in the tree view.针对每项配置源码级补充说明如下cliPath作用域为machine机器级。CliWrapper构造时读取该值为空时回退到PATH中的code-review-graph可执行文件配置了自定义路径如虚拟环境、conda 环境或自编译二进制时优先使用适合后端不在默认 PATH 的场景。autoUpdatesetupAutoUpdate在保存文本后检查该开关若开启则以2000ms 防抖AUTO_UPDATE_DEBOUNCE_MS调度一次cli.updateGraph更新失败会被静默忽略不会打断编辑用户仍可随时手动Update Graph。blastRadiusDepth声明minimum: 1、maximum: 10。该值同时作用于Show Blast Radius、Review Changes与 SCM 文件徽章三处的影响半径计算getImpactRadius(..., depth)。graphTheme枚举auto/light/dark。auto跟随 VS Code 当前主题扩展还监听onDidChangeActiveColorTheme主题切换时自动向图面板下发setTheme消息无需重建面板见 code-review-graph-vscode/src/views/graphWebview.ts。graph.maxNodes范围 10–5000。图面板加载数据时若节点数超过上限会截断节点并同步过滤两端都在保留集合内的边同时向页面下发truncated标记与截断警告。graph.defaultEdges数组类型可选项为全部 7 种边类型默认值为[CALLS,IMPORTS_FROM,INHERITS,IMPLEMENTS,TESTED_BY,DEPENDS_ON]即排除CONTAINS。这与图面板工具栏中的Edges边类型过滤器联动。treeView.*5 项开关控制 Code Graph 树视图中各类型节点的显隐均默认开启便于在大仓库中按需精简视图。七、爆炸半径与图查询的工作原理BFS 影响传播算法爆炸半径由SqliteReader.getImpactRadius(changedFiles, maxDepth)code-review-graph-vscode/src/backend/sqlite.ts实现其注释明确指出与 Python 侧GraphStore.get_impact_radius逻辑完全一致共分三步种子收集取出变更文件内的全部节点限定名作为种子集合双向 BFS从种子出发沿**出边本节点影响谁与入边谁依赖本节点**同时向外扩展最多传播maxDepth层得到受影响节点集合排除种子本身结果聚合解析受影响节点的完整信息、受影响文件列表并利用getEdgesAmong一次性取回所有涉及节点之间的边采用参数化 IN 子句对任意规模的节点集合都安全高效。由于传播同时覆盖正向与反向边即使被调用方反向依赖链发生变更也能准确找出所有上游调用方。数据库 schema 兼容性保障SqliteReader打开数据库时会执行checkSchemaCompatibility()校验nodes、edges表是否存在并读取metadata表中的schema_version。当前扩展支持到schema v9与 code_review_graph/migrations.py 中的LATEST_VERSION对齐若库版本高于 9会提示数据库由更新版本创建请升级扩展并提供一键 Rebuild Graph。八、审查工作流Review Changes 与 SCM 徽章Code Graph: Review Changes是扩展面向 Code Review 场景的核心命令其完整流程见extension.ts为通过git diff --name-only HEAD未暂存与git diff --cached --name-only已暂存收集变更文件去重后转为绝对路径以这些文件为种子计算爆炸半径深度取blastRadiusDepth自动生成审查指引guidance包括四类信号测试覆盖缺口变更函数若无TESTED_BY边正反两向都检查列出前 5 个函数名并提示数量宽爆炸半径受影响文件数 10 时建议拆分本次变更继承链受影响变更涉及INHERITS/IMPLEMENTS边时给出提示跨文件影响统计汇总受影响节点与文件数量将统计与指引输出到 Code Graph Review 输出通道并在图面板中仅渲染 changed impacted 子图更新 SCM 文件装饰徽章。配合 code-review-graph-vscode/src/features/scmDecorations.ts 中的ScmDecorationProviderExplorer 与 SCM 视图中的文件会获得三类徽章徽章颜色含义●警告色橙色文件处于当前变更的爆炸半径内未被直接修改✓通过色绿色变更文件内所有函数均有测试覆盖!错误色红色变更文件内存在无测试覆盖的函数这样审查者在浏览文件列表的瞬间即可识别哪些文件被波及、哪些变更缺测试无需逐个打开文件。九、交互式图可视化D3 力导向图Code Graph: Show Graph打开基于D3.jsv7的力导向依赖图code-review-graph-vscode/src/views/graphWebview.ts前端渲染逻辑见 code-review-graph-vscode/src/webview/graph.ts。工具栏提供节点搜索在图中实时过滤/高亮节点边类型过滤Edges以彩色胶囊开关 7 种边Calls 绿 / Imports 橙 / Inherits 紫 / Implements 黄 / Tested 粉 / Contains 灰 / Depends 橙深度滑块选中节点后可限制 0–10 层邻居范围Fit / Export SVG / Export PNG适配视图、将 SVG 复制到剪贴板、或将 PNG 另存为文件savePngToFile通过showSaveDialog落盘。图面板支持与树视图/编辑器的双向联动点击图中节点即打开对应文件定位到行同时触发codeReviewGraph.revealInTree高亮从外部如树视图点击调用GraphWebviewPanel.highlightNode则会在图中以脉冲动画高亮节点。面板通过retainContextWhenHidden保留状态并依据 VS Code 主题自动切换明暗配色。十、要求、边界与使用前提根据 README 的 Requirements 一节VS Code 1.85engines.vscode声明types/vscode同为 1.85.0Python 3.10后端 CLI 运行前提一个包含待分析源码的工作区git 仓库更佳Review Changes 依赖git命令。需要注意的适用前提图数据库由 Python 后端在build/update/watch时写入因此首次使用前必须先完成安装后端 构建图两步Review Changes依赖工作区内可用的git可执行文件Compute Embeddings需要额外安装code-review-graph[embeddings]可选依赖。若遇到better-sqlite3原生模块 ABI 不匹配多见于 WSL 或 Node 版本不一致扩展会在控制台提示在扩展安装目录执行npm rebuild better-sqlite3code-review-graph-vscode/src/backend/sqlite.ts。十一、从源码构建扩展若需从当前仓库自行构建扩展package.json的 scriptscd code-review-graph-vscode npm install npm run compile # esbuild 打包产出 dist/extension.js npm run watch # 开发模式监听 npm run package # vsce package 生成 .vsix后端 CLI 的详细命令与用法可进一步阅读 docs/COMMANDS.md图数据库的表结构说明见 docs/schema.md仓库内还提供了针对 SQLite 读写逻辑的单元测试 code-review-graph-vscode/test/sqlite.test.ts可作为扩展行为的补充参考。结语Code Review Graph for VS Code 把代码图谱从纯后端产物变成了编辑器中随手可用的日常工具树视图负责结构化浏览D3 图负责整体把握依赖拓扑Blast Radius 与 Review Changes 负责在变更发生前预警影响面SCM 徽章让测试覆盖缺口一目了然。结合本地 SQLite 存储与增量更新机制它可以在不引入任何云端服务的前提下为日常开发、代码评审与 AI 辅助编程提供一份始终新鲜的代码关系地图。【免费下载链接】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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表