vscode依赖图需依赖dependency-cruiser cli+graphviz渲染,非全自动;需正确配置volar、文件关联及排除规则,静态解析局限要求先验证路径解析准确性。

vscode-dependencyGraph 导出 SVG/PNG 时空白或报错
导出的图是空白,或者 dot 渲染阶段报 syntax error in line X,大概率不是插件本身坏了,而是中间数据流被污染了。vscode-dependencyGraph 生成的图数据本质是 Graphviz 的 dot 语法,但它的导出逻辑不加过滤地把警告、日志甚至空行一起塞进输出流。
- 确保导出前关闭所有无关终端面板,避免其他扩展干扰输出缓冲
- 右键文件 → Show Dependencies 后,先等左下角状态栏显示
Dependency graph generated再点 Export 按钮;如果状态栏一直卡在Scanning...,说明它正卡在某个动态 import 或别名路径上(比如@/utils未被 Volar 正确解析) - 导出 SVG 失败时,改用 PNG:
Export → PNG;SVG 渲染依赖浏览器 DOM 能力,大图(>200 个节点)容易触发内存限制 - 若仍失败,手动执行底层命令验证:打开集成终端,运行
npx depcruise src/ --output-type dot --exclude "**/node_modules/**" | dot -Tpng > deps.png—— 这能绕过插件封装,直接暴露问题环节
Project Dependencies Viewer 不显示反向依赖(谁 import 了我)
这个插件只做单向静态扫描:右键 foo.ts → Show Dependencies,出来的图永远是 foo.ts → bar.ts → utils.ts,不会出现 main.ts → foo.ts。这不是 bug,是设计限制。
- 它不读取项目级配置(如
.dependency-cruiser.js),也不走模块解析流程,纯靠 Babel AST 提取import字符串,对import()、require(''+name)、defineProps类型导入完全无感 - 想查“谁用了我”,得换工具:在终端跑
npx depcruise --include-only "src/foo.ts" --config .dependency-cruiser.js,配合--output-type html生成可交互报告 - VSCode 内置的
References: Find All References(Shift+F12)更轻量,但只定位符号引用,不体现文件级依赖拓扑
导出 JSON 依赖树后字段缺失或路径混乱
vscode-dependencyGraph 导出的 JSON 里,经常出现 ./utils/index.js 这种相对路径,点不开、hover 没类型提示,甚至字段如 functions 或 comments 为空——根本原因在于它没接入项目语言服务上下文。
- 确认
files.associations已设"*.vue": "vue",否则 Vue SFC 中的<script setup></script>块不会被正确解析为 TS 模块 - 检查 Volar 是否启用并接管 TS 语言功能:打开一个
.vue文件,看右下角状态栏是否显示Volar (TS Server);若显示TypeScript Language Features,说明 Volar 未生效,路径别名(如@/store)会全部解析失败 - 导出的 JSON 不含
tsconfig.json中的paths映射信息,这是插件能力边界——它不调用 TypeScript 编译器 API,只做文本/AST 层分析
用 dependency-cruiser 替代插件导出,但图表太密看不清
CLI 工具产出的图信息全,但默认渲染出来就是一团线网,尤其在中大型项目里,src/ 下几十个模块互相 import,dot 生成的图根本没法人工读。
- 加
--max-depth 2限制依赖层级,聚焦核心模块关系,避开node_modules底层细节 - 用
--include-only锁定分析范围:例如npx depcruise --include-only "src/features/**/*" src/,排除工具库和测试代码 - 导出 HTML 报告比图更实用:
npx depcruise src/ --output-type html --output-to dep-report.html,里面带搜索、过滤、循环检测高亮,还能点开每个模块看具体 import 行号 - 真正需要图时,别硬抗全量:先用 HTML 报告定位关键耦合点(比如 A 模块意外依赖了 B 模块的私有 util),再针对这两个文件单独生成子图
.dependency-cruiser.js 里的 exclude 和 tsConfig 字段,漏配一个,导出的报表就等于废纸。











