VSCode必备开发扩展插件_VSCode自动导入Vue变量【方案】-VSCode-PHP中文网

vue组件自动导入失败需确保volar接管语言服务（状态栏显示vue图标）、启用autoimports和experimental.enableautoimport、配置tsconfig.json及重启ts server。

vscode必备开发扩展插件_vscode自动导入vue变量【方案】

Vue 文件里写 ref、defineProps 没自动加 import，不是插件没装，而是 Volar 没真正接管语言服务，或关键配置开关关着——只要状态栏没显示 vue（带 Volar 图标），所有自动导入都白搭。

VSCode 默认不把 .vue 当作 TypeScript/JavaScript 上下文处理，Volar 必须“夺权”才能让 script setup 里的符号被 TS Server 看见。

没有 tsconfig.json，TS Server 启动失败；没开 autoImports，Ctrl+. 就不会弹 import 建议——两者缺一不可。

Auth0 Vue

在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

项目根目录必须有 tsconfig.json，哪怕内容只是 {"compilerOptions": {}}
settings.json 中必须显式设为布尔值 true：typescript.suggest.autoImports 和 javascript.suggest.autoImports（注意拼写是 autoImports，不是 autoImport）
如果用了路径别名（如 @/components），tsconfig.json 的 compilerOptions.paths 必须正确定义，否则自动导入会 fallback 成相对路径
改完配置后，务必运行 TypeScript: Restart TS server，否则新配置不生效

<elbutton></elbutton> 写了但报 is not defined，不是组件没注册，而是 Volar 看不到它的类型信息——这需要三方协同：插件生成注册逻辑、.d.ts 声明全局组件、TS Server 重载该文件。

vite.config.ts 中 Components() 必须在 plugins 数组里真实调用（不能注释、不能拼错、不能包在 if (process.env.NODE_ENV === 'production') 里）
Components({ dts: 'src/components.d.ts' }) 配置的路径，必须出现在 tsconfig.json 的 "include" 列表中（例如 "include": ["src/**/*", "src/components.d.ts"]）
检查生成的 src/components.d.ts 是否含类似 declare module 'vue' { interface GlobalComponents { ElButton: typeof import('element-plus')['ElButton'] } } 的内容
改完配置后，手动执行 Restart TS server，否则 Volar 仍读的是旧声明

Vue 模板中的组件名（如 <mycomp></mycomp>）能否触发自动导入，取决于 Volar 的实验性开关是否开启，且只对 script setup 区域内已知的符号有效——template 本身不参与 import 推导。

volar.experimental.enableAutoImport 必须设为 true（这是个隐藏开关，需手动加进 settings.json）
自动导入只响应 script setup 中已声明或可推导的变量名，template 里直接输 MyComp 不会触发补全；想让它工作，得先在 script 里写一次 const MyComp = defineComponent(...) 或靠 unplugin-vue-components 注入
第三方组件库（如 Element Plus）需配 resolvers，但自定义组件走的是 dirs 扫描路径，命名必须符合 PascalCase（MyTable.vue 可以，my-table.vue 不行）