VSCode依赖图需依赖dependency-cruiser CLI+Graphviz渲染，非全自动；需正确配置Volar、文件关联及排除规则，静态解析局限要求先验证路径解析准确性。
VSCode 本身不生成依赖图，必须靠外部 CLI 工具产出结构化数据，再由 Graphviz 渲染；插件只是快捷入口，不是全自动方案。
dependency-cruiser 是目前最可靠的 CLI 主力工具
它能真实扫描 import/export、支持 ESM/TSX/SFC，还能配合配置做循环检测和跨层调用拦截。但注意：它不是 VSCode 插件，而是命令行工具，需手动集成进终端或 tasks。
- 安装后先运行
npx dependency-cruiser --init生成.dependency-cruiser.js，别跳过——尤其doNotFollow和exclude字段，否则遇到node_modules里的循环引用，depcruise会卡死或报error: cycle detected - Vue 项目务必加
--extensions js,ts,jsx,tsx,vue，否则<script setup>里的import全被忽略 - ESM 项目默认不扫
node_modules，这是优点，但若要排除特定内部包（如@myorg/utils），得在配置里显式写exclude: ["^@myorg/utils"] - CI 中可加
--fail-on-error，让构建卡在非法依赖上，而不是等上线才发现耦合失控
Graphviz 是渲染环节不可跳过的依赖
没装 dot 命令，npx depcruise --output-type dot 的输出就无法转成图，直接报 command not found: dot。
- macOS：用
brew install graphviz；Windows 去官网下载安装包，并确保dot.exe在PATH中 - 典型管道命令：
npx depcruise --silent src/ --output-type dot | dot -Tsvg > deps.svg，其中--silent很关键——不加的话，depcruise的警告日志会混进 dot 数据，导致dot报syntax error in line X - SVG 打开是空白？可能是图太大浏览器撑不住，改用
dot -Tpng，或加--max-depth 2控制层级
Volar 是 Vue 项目依赖分析生效的前提
没有 Volar，depcruise 输出的图里全是“死箭头”：你看得到 A → B，但点不进 B 的定义，hover 不出类型，Find All References 在 defineProps 上直接失效。
- 必须开启
volar.takeOverMode，否则import { useUserStore } from '@/store'这类别名路径在模板里写错属性名，VSCode 根本不会标红 -
files.associations必须设为"*.vue": "vue"，若误配成"*.vue": "html"，depcruise解析出的 import 路径会丢失@/→src/映射，图中全是相对路径碎片 - 禁用 Vetur：两者共存时，Volar 的类型提示和引用链会被截断，这是已知冲突，不是配置问题
别迷信右键“View Dependencies”这类快捷插件
VSCode 插件市场里叫 “Dependency Cruiser for VS Code” 或 “View Dependencies” 的插件，大多已停止维护，不兼容 Vue 3 SFC，也不读 .dependency-cruiser.js 配置。
- 右键文件选 View Dependencies，只展示“当前文件 import 了谁”，不显示“谁 import 了当前文件”——反向引用得用
Shift+Alt+F12（Find All References） - 对
import()动态路径、require('' + name)、eval加载的模块完全不可见 - 首次加载慢，大项目可能卡顿十几秒；图里没有缩放、拖拽、悬停提示路径等交互功能
- 真正省事的替代是
madge：运行npx madge --html deps.html --layout dot src/，打开 HTML 就能缩放拖拽，循环节点自动高亮，比肉眼找 SVG 箭头靠谱得多
最容易被忽略的一点：所有图形化依赖分析都建立在「静态解析」基础上，动态 require、webpack alias 未正确配置、defineExpose 类型未导出、甚至 tsconfig.json 里 baseUrl 写错，都会让图里出现断裂或幻影节点——别只盯着图看，先确认语言服务是否真把路径解析对了。
