vscode依赖图需依赖dependency-cruiser cli和graphviz渲染，非一键自动生成；必须配置好.dependency-cruiser.js、安装graphviz、启用volar并正确设置文件关联，否则路径解析失败、图渲染空白或箭头不可跳转。
VSCode 依赖图不是点一下就出来的
VSCode 本身不生成依赖图，所有“一键出图”插件背后都依赖外部 CLI 工具。最常用的是 dependency-cruiser，它负责扫描 import/export、解析路径、检测循环，但必须手动运行或集成进 tasks.json。你装了插件却看不到图，大概率是 depcruise 根本没跑起来，或者输出被日志污染了。
- 别跳过
npx dependency-cruiser --init：生成的.dependency-cruiser.js里doNotFollow和exclude字段不配好，遇到node_modules里的循环就卡死 - Vue 项目必须加
--extensions js,ts,jsx,tsx,vue，否则<script setup></script>里的import全被忽略 -
--silent很关键：不加的话，depcruise的 warning 日志会混进 dot 数据，导致dot报syntax error in line X
Graphviz 是渲染环节的硬门槛
没有 dot 命令，depcruise --output-type dot 的输出就只是纯文本，没法转成图。这不是插件问题，是环境缺失。
- macOS：用
brew install graphviz；Windows 去官网下安装包，确保dot.exe在PATH中 - 典型管道命令：
npx depcruise --silent src/ --output-type dot | dot -Tsvg > deps.svg - 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 的类型提示和引用链会被截断，这是已知冲突，不是配置问题
vscode-dependencyGraph 插件能做什么、不能做什么
这个插件用 Babel Parser 构建 AST，支持 JS/TS/Vue/SCSS，能导出 SVG/PNG、保存 JSON 依赖树，但它只展示“当前文件往下的依赖”，不显示“谁引用了我”。想查反向依赖，还得靠 VSCode 自带的 Find All References（Shift+Alt+F12）。
- 右键某个文件 →
View Dependencies：只画出该文件import的下游模块 - 右键某个
import语句 →Find All References：才能看到谁在引用这个模块 - 它不依赖 Graphviz，也不扫
node_modules，轻量但静态——比如动态import()或 require 字符串拼接，它基本识别不了
dot 没装、或者图一放大就空白——这些细节不调通，再漂亮的插件图标也出不来真实依赖。
