vscode 查看 vue 依赖图需 dependency cruiser（cli 主力，生成 svg 图）、volar（语义支撑，启用 takeovermode 并正确配置文件关联）和 codegraph（轻量符号级依赖查询）三者协同；缺一不可。
VSCode 查看 Vue 依赖图，没有“开箱即用”的单插件方案；真正能跑通的组合是 Dependency Cruiser（命令行主导） + Volar（语言服务支撑） + CodeGraph（轻量符号图辅助），三者分工明确，缺一不可。
Dependency Cruiser 是 Vue 项目依赖图的主力工具
它不是 VSCode 插件，而是 CLI 工具，但可深度集成进 VSCode 终端和任务系统，生成真实、可验证、带规则检测的依赖图。
- 必须在项目根目录运行
npx depcruise --output-type dot src --exclude node_modules | dot -Tsvg > deps.svg才能得到可用的 SVG 图；直接装插件版（如 “Dependency Cruiser for VS Code”）往往不更新、不兼容 Vue3 SFC -
--include-only "^src/"强制限定分析范围，避免把tests/或mocks/混入主依赖流 - 配合
.dependency-cruiser.json配置循环检测：比如禁止src/views→src/store→src/views这类跨层反向调用 - CI 中可加
--fail-on-error，让构建卡在非法依赖上，而不是等上线才发现模块耦合失控
Volar 是依赖分析能生效的前提
没有 Volar，Dependency Cruiser 的输出可能“对但无感”——你看到箭头，却点不进源头函数。Volar 提供的是可跳转、可 hover、可推导的语义基础。
- 必须开启
volar.takeOverMode，否则import { useUserStore } from '@/store'在模板里写错属性名，VSCode 根本不会标红 -
files.associations必须设为"*.vue": "vue"，若误配成"*.vue": "html"，Dependency Cruiser 解析出的 import 路径会丢失别名（@/→src/）映射，图中全是相对路径碎片 - 禁用
Vetur：两者共存时，Volar 的类型提示和引用链会被截断，Find All References在defineProps上失效是典型表现
CodeGraph 适合快速查单文件/符号级依赖链
它不替代 Dependency Cruiser 的全项目扫描，但在日常开发中更轻量、响应更快，适合“这个组件到底被谁用了？”这类即时问题。
- 安装后右键点击
setup()函数 →CodeGraph: Show Dependencies，立刻弹出调用它的页面和组合式函数 - 对
src/composables/useApi.ts右键 →Show Dependents，能列出所有import { useApi }的 .vue 文件，比全局搜索useApi更准（排除了字符串匹配误伤） - 不支持
<script setup lang="ts"></script>中的类型参数推导，比如defineProps()的id字段不会出现在依赖节点里——这是已知限制，别指望它补全类型图
真正难的不是画出一张图，而是让图里的每个节点都能点进去、每个箭头都有上下文、每次重构后图能自动刷新。这要求你亲手配好 volar.takeOverMode、写对 .dependency-cruiser.json 的 moduleSystems、并在 tasks.json 里固化生成命令——自动化不是点一下就出来，是把每条路径都走通一遍后的副产品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
