volar自动导入默认不生效，因需同时开启vue.autoinsertion.enabled和typescript.preferences.includepackagejsonautoimports两个开关，任一关闭都会导致组件或api报“未定义”。
Vue 3 项目里手动写 import 再 components 注册，不仅重复、易漏，还破坏 <script setup></script> 的简洁性——Volar 已原生支持自动导入，但默认不启用，必须配对开启。
为什么 Volar 的自动导入默认不生效
Volar 在 Vue 3 + <script setup></script> 场景下，自动导入能力依赖两个开关同时打开：vue.autoInsertion.enabled（控制是否插入）和 typescript.preferences.includePackageJsonAutoImports（影响模块解析路径）。任一关闭，ref、computed 或自定义组件都会卡在“未定义”状态。
- 常见错误现象：
Uncaught ReferenceError: MyComponent is not defined，但组件文件存在、路径正确、也写了defineComponent - VS Code 设置中搜索
autoInsertion，确认Vue: Auto Insertion Enabled已勾选 - 在
settings.json中显式添加："vue.autoInsertion.enabled": true和"typescript.preferences.includePackageJsonAutoImports": "auto" - 重启 VS Code 或重载窗口（
Cmd+Shift+P→Developer: Reload Window），否则变更不触发语言服务重载
如何让自定义组件名自动出现在 import 补全列表里
不是所有 .vue 文件都能被识别为可导入项——Volar 只索引满足命名规范、且被至少一处 import 引用过的组件。空项目或新组件首次保存后需手动触发一次索引刷新。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确保组件文件名符合 PascalCase（如
MyButton.vue），且导出为defineComponent或export default对象 - 在任意
.vue文件中，输入import {或components: {后按Ctrl+Space，若无响应，先在项目根目录下创建一个临时import语句（如import Test from './Test.vue'），保存后再删掉 - 检查
tsconfig.json或volar.config.json中是否禁用了"compilerOptions.types"或误配了"include"路径（比如漏掉src/**/*） - 路径别名（如
@/components/）需在jsconfig.json或tsconfig.json的compilerOptions.paths中正确定义，否则 Volar 无法解析
Auto Import 插件与 Volar 冲突怎么办
第三方插件如 Auto Import（by steoates）或 Import Cost 会劫持 import 行补全逻辑，覆盖 Volar 的 Vue 特有行为，导致组件名不出现、甚至插入错误路径（如带 .vue 后缀的绝对路径）。
- 直接禁用这类通用 import 插件：在扩展面板中搜索名称，点击齿轮图标 →
Disable (Workspace) - Volar 自带的自动导入不依赖额外插件，也不需要配置
path alias映射规则，它读取的是项目实际文件结构 - 若仍需保留
Import Cost查体积，可将其作用范围限制在.js和.ts文件（在设置中加"import-cost.enableForLanguages": ["javascript", "typescript"]） - 验证是否生效：在
<script setup></script>中输入<my>，应立刻弹出组件候选；选中后，<code>import行自动插入，且路径为相对路径（如./MyButton.vue）
最常被忽略的是 Volar 的语言模式切换——如果某个 .vue 文件右下角显示 “HTML” 而非 “Vue”，说明文件未被识别为 Vue 单文件组件，所有自动导入功能彻底失效。此时需点击右下角语言模式，手动选择 “Vue” 并点击 “Configure File Association for ‘*.vue’” → 设为 “Vue”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
