vscode本身不生成依赖图，需依赖dependency-cruiser等外部工具产出结构化数据并用graphviz渲染；插件仅提供快捷入口，非全自动方案。

VSCode 本身不生成依赖图，必须靠 dependency-cruiser 这类外部工具先产出结构化数据，再用 Graphviz 渲染；插件只是快捷入口，不是全自动解决方案。

安装 dependency-cruiser 并配好 Graphviz

没装 Graphviz 就跑 dot 命令会直接报错 command not found: dot。macOS 用 brew install graphviz，Windows 去官网下安装包并加进 PATH。接着在项目里装 dependency-cruiser：

• npm install -D dependency-cruiser（或 pnpn add -D dependency-cruiser）
• 运行 npx dependency-cruiser --init 生成 .dependency-cruiser.js，它默认把 src/ 当作分析起点
• 别跳过配置——尤其 doNotFollow 或 exclude 字段，否则遇到 node_modules 里的循环引用，depcruise 会卡死或抛 error: cycle detected

生成 SVG 图时命令链容易断在哪

典型命令是：npx depcruise src/ --output-type dot | dot -Tsvg > deps.svg。这个管道链有三个常见断点：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• depcruise 输出为空 → 检查 src/ 路径是否存在、是否被 exclude 规则误杀
• dot 报 syntax error in line X → 多半是 depcruise 输出了警告日志混在 dot 数据里，加 --silent 参数（如 npx depcruise --silent src/ --output-type dot）
• SVG 打开是空白 → 可能图太大浏览器渲染失败，改用 dot -Tpng 或加 --max-depth 2 控制层级

VSCode 插件 View Dependencies 的真实能力边界

右键文件选 View Dependencies 确实快，但它只做单向静态分析：

• 只展示“当前文件 import 了谁”，不显示“谁 import 了当前文件”——想查反向引用得用 Shift+Alt+F12（Find All References）
• 对 import() 动态路径、require('' + name)、eval 加载的模块完全不可见
• 首次加载慢，大项目可能卡顿十几秒；节点点击能跳转，但图里没有缩放、拖拽、悬停提示路径等交互功能
• 不读 .dependency-cruiser.js 配置，所有过滤逻辑失效，第三方包全塞进图里，核心模块反而难定位

比 SVG 更实用的替代方案：madge HTML 图

如果只是想快速看循环依赖和整体流向，madge 生成的 HTML 图更省事：

• npx madge --html deps.html --layout dot src/，打开 deps.html 就能缩放、拖拽、悬停看路径
• 循环节点自动高亮，比 SVG 里肉眼找箭头靠谱得多
• ESM 项目务必加 --extensions js,ts,jsx,tsx，否则 import 全被忽略
• 它默认不扫 node_modules，天然避开噪音，但若要排除特定内部包，得用 --exclude 正则

真正麻烦的从来不是生成图，而是图里堆满 lodash、react、@types ——你得先用配置把它们滤掉，才能看清自己写的两个 service 到底怎么串起来的。