VSCode 无自动生成依赖图功能,需依赖 CLI 工具如 dependency-cruiser(最稳定)配合 Graphviz dot 渲染;须配置 .dependency-cruiser.js、启用 Volar、排除 node_modules 和第三方包;Project Dependencies Viewer 插件能力有限,Java 项目推荐用 vscode-java 自带 Maven: Show Dependencies。

VSCode 本身不提供“插件自动生成项目依赖项”的功能——所谓“自动生成依赖项”,本质是静态分析 import/export 语句后生成结构化数据,再交由渲染工具画图。没有哪个插件能绕过 dependency-cruiser 或 madge 这类 CLI 工具直接产出可靠依赖图。
dependency-cruiser 是目前最稳的 CLI 依赖分析器
它不是 VSCode 插件,但可被集成进终端或 tasks;支持 TS/JS/JSX/TSX/VUE(Vue 项目必须加 --extensions js,ts,jsx,tsx,vue),能识别 defineProps、defineEmits 等 SFC 内部 import。关键点:
- 必须先运行
npx dependency-cruiser --init生成.dependency-cruiser.js,否则默认配置会扫进node_modules,极易触发error: cycle detected -
doNotFollow和exclude字段要配实:比如排除第三方包用exclude: ["^@types/", "^lodash"],避免图被噪音淹没 - Volar 必须启用——否则图中箭头无法跳转,hover 不出类型,
Find All References在defineProps上直接失效
Graphviz 的 dot 命令是渲染不可跳过的环节
没有 dot,depcruise --output-type dot 输出的只是纯文本 DOT 格式,无法转成 SVG/PNG。常见问题:
- macOS:用
brew install graphviz,验证是否成功:dot -V - Windows:去官网下载安装包,手动把
dot.exe所在目录(通常是C:\Program Files\Graphviz2.44\bin\dot.exe)加进系统 PATH - 管道命令里务必加
--silent:npx depcruise --silent src/ --output-type dot | dot -Tpng > deps.png,否则警告日志混入 DOT 数据,dot直接报syntax error in line X
Project Dependencies Viewer 插件只做轻量预览,别当主力
插件 ID:grunow.project-dependencies-viewer,右键文件 → “Show Dependencies” 即可触发。但它有硬伤:
- 只解析静态
import,对require("."+env+".js")、import(`./${name}.ts`)、eval加载完全不可见 - 不支持反向查询——你能看到 A 引了 B,但查不出“谁引了 A”
- 不支持点击跳转,hover 无类型提示,和 Volar + depcruise 组合相比,信息维度严重缺失
Maven 项目用 vscode-java 自带命令更省事
Java 用户不用折腾 CLI 工具:装好 Extension Pack for Java 后,直接调命令面板(Ctrl+Shift+P)→ 输入 Maven: Show Dependencies,就能展开树状依赖视图。注意:
- 它读的是
pom.xml解析结果,不是源码 import 分析,所以看不到跨 module 的代码级引用链 - 多模块项目自动识别,但若某 module 的
pom.xml未被正确加载(比如路径含空格或中文),依赖树会显示不全 - 想导出为文本?右键依赖节点 → “Copy Dependency Tree”,粘贴即得缩进格式树,比手写脚本快
真正容易被忽略的,是路径解析准确性——depcruise 扫不到 src/ 下某个文件,往往不是配置问题,而是 tsconfig.json 或 vite.config.ts 里 alias 没被正确 resolve,导致 import 路径在静态分析时断掉。先跑一遍 npx depcruise --validate,比直接画图更能暴露底层问题。


















