Ctrl+Click组件名无反应的根本原因是Volar未真正接管.vue文件，需手动将语言模式设为Volar、tsconfig.json添加"types": ["vue"]并重启TS服务、paths配置别名且与Vite一致、启用experimental.vueMacros，全部配置完成后必须彻底重启VSCode窗口。

为什么 Ctrl+Click 组件名没反应

不是插件没装，是 Volar 没真正接管 .vue 文件——VSCode 默认可能仍用 HTML 或 Vetur 解析，Volar 不会自动抢权。右下角状态栏显示 “HTML” 或 “Vetur”，就说明跳转链断了。

• 打开任意 .vue 文件，点击右下角语言模式（如显示 “Vue” 或 “HTML”）→ 选 Configure File Association for '.vue' → 明确选 Volar（注意不是 “Vue (Volar)” 或 “Vetur”）
• 改完后必须关闭并重新打开整个 VSCode 窗口（仅重载无效），再确认状态栏显示 Vue (Volar)
• 若仍不生效，在命令面板运行 Developer: Toggle Developer Tools，Console 中搜 volar，看是否有注册失败或服务未启动日志

tsconfig.json 缺 "types": ["vue"] 导致 defineProps 报红

Cannot find name 'defineProps' 这类错误不是语法错，是 TypeScript 根本没加载 Vue 的全局类型声明。Volar 依赖 TS 服务注入类型，而前提是 tsconfig.json 显式声明来源。

• 在项目根目录 tsconfig.json 的 compilerOptions 中添加："types": ["vue"]
• 改完后必须执行 Ctrl+Shift+P → 输入 Restart TS server，否则不生效
• 纯 JS 项目用 jsconfig.json，则需加 "types": ["vue/types"] 并确保已安装 @vue/runtime-core

@/components 跳转 404 的真实原因

Volar 不读 vite.config.ts 里的 resolve.alias，它只认 tsconfig.json 或 jsconfig.json 中的 compilerOptions.paths。两者不一致，跳转就 404。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 确认 tsconfig.json 中有：

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }

• paths 键必须以 / 结尾（如 "@/*"），否则 @/components/Modal 匹配失败
• 如果用了 ~/、#/ 等别名，也要在 paths 中显式列出，Volar 不会推导
• 保存后必须重启 VSCode 窗口（不是重载），否则缓存未刷新，路径映射不生效

script setup 中 ref 解构后类型显示 any

const { count } = reactive({ count: 0 }) 后 count 显示 any，本质是 Volar 没启用宏级类型推导。Vue 3.3+ 的 defineProps<T>() 泛型也依赖这个开关。

立即学习“前端免费学习笔记（深入）”；

• 打开 VSCode 设置，搜索 volar.experimental.vueMacros
• 勾选 Vue > Experimental: Vue Macros
• 必须重启整个 VSCode 窗口（仅重载无效）
• 该选项开启后首次打开大项目索引时间变长，但后续 ref 解构、computed 返回值类型都能正确映射

组件跳转和类型提示失效，往往卡在“配置没对齐”这一步：Volar 接管了文件，TS 服务加载了类型，路径映射也写了——但三者指向的路径格式不一致、重启动作不到位、或旧插件（Vetur）还在后台干扰。最容易被忽略的是：改完 tsconfig.json 或勾选 volar.vueMacros 后，不关窗重开，等于白配。