call hierarchy 快捷键无响应主因是语言服务器未就绪:c/c++需clangd+compile_commands.json,python需pylance,ts/js需文件被正确识别;c relation需手动init database,code2flow仅限当前文件,dependency-cruiser需cli配置exclude规则。

Call Hierarchy 快捷键没反应?先查语言服务器状态
VSCode 的 Ctrl+Shift+H(Call Hierarchy)不是独立功能,它完全依赖后端语言服务器是否已正确提供调用层级数据。没反应 ≠ 插件坏了,大概率是语言服务没就位。
- C/C++:确认
clangd正在运行,且项目根目录下有compile_commands.json;若用 CMake,需加-DCMAKE_EXPORT_COMPILE_COMMANDS=ON - Python:确保启用了
Pylance(非默认的 Python 扩展),并在设置中关闭python.languageServer的旧版Jedi - TypeScript/JS:原生支持较好,但若文件未被识别为 TS/JS(比如后缀是
.mjs或无后缀),Go to References和 Call Hierarchy 都会失效 - 宏、内联函数、
from module import *等写法会导致符号不可见——这些不是 bug,是语言服务的语义限制
C Relation 插件:C 项目专用,但必须手动建库
C Relation 是少数真能生成交互式调用图的 VSCode 插件,但它不靠语言服务器,而是用 Tree-sitter 解析源码构建本地符号数据库。这意味着它不“即开即用”,首次使用必须显式初始化。
- 打开命令面板(
Ctrl+Shift+P),执行C Relation: Init database—— 它会扫描所有.c和.h文件,耗时取决于项目大小 - 初始化完成后,右键任意函数名 →
Show Relations,新标签页中显示的是可拖拽、可点击跳转的 D3 图,节点悬停可见文件路径与行号 - 代码修改后不会自动更新图:需手动执行
C Relation: Update database;若怀疑索引脏了,用Force update database - 数据库默认存于
~/.crelation,路径不可在 UI 中改,只能编辑插件配置并重启 VSCode
Code2flow:轻量跨语言,但只分析当前文件
Code2flow 是最易上手的图形化方案,支持 .c、.py、.js 等,但它不做跨文件解析——它只看你当前打开的文件里写了哪些函数调用。
- 右键 →
Code2flow: Generate Flowchart,输出横向流程图,箭头方向是“调用流向”,非严格依赖图 - 适合快速验证单个函数逻辑链,或整理一段临时伪代码;不适合理解模块间耦合
- 不依赖语言服务器,也不需要预建库,但对宏、模板、动态 import(如
import(...))基本无识别能力 - 若想导出 PNG/SVG,需本地装 Graphviz 并配置插件路径;否则只生成 DOT 文本,得手动粘贴进在线编辑器
dependency-cruiser + Graphviz:真正全项目依赖图的标配组合
要画出带 src/utils → src/api → node_modules/axios 这种真实路径的依赖图,dependency-cruiser 是目前最可靠的选择。但它不是插件,而是 CLI 工具,必须集成进终端工作流。
- 先运行
npx dependency-cruiser --init生成.dependency-cruiser.js,重点配好exclude(如["^node_modules", "^@types"])和doNotFollow,否则遇到循环引用直接卡死 - Vue/TSX 项目务必加
--extensions js,ts,jsx,tsx,vue,否则<script setup></script>里的 import 全被忽略 - 渲染命令示例:
npx depcruise src/ --output-type dot | dot -Tsvg > deps.svg,其中--silent很关键,否则日志混入 DOT 数据导致dot报语法错误 - 图太大打不开?加
--max-depth 2控制层级,或换-Tpng;SVG 空白常见原因是浏览器加载失败,先用dot -Tpng验证数据是否正常
真正难的不是生成图,而是让图里只出现你关心的模块。第三方包、类型定义、测试文件——它们都会被解析进去,一不留神图就变成密密麻麻的蜘蛛网。每次运行前,花两分钟检查 exclude 规则,比事后调 zoom 缩放有效得多。











