VSCode Vue项目补全需三要素：Volar启用、jsconfig.json/tsconfig.json存在且含"types": ["vue"]、语言模式为Vue；缺一则ref()、defineProps等无提示。
VSCode 的 Vue 项目补全不是靠“装个插件就自动好”，它依赖三件事：正确的语言模式识别、jsconfig.json 或 tsconfig.json 存在、以及 Vue 官方语言工具链（Volar）启用。缺一不可，否则 ref() 不提示、defineProps 无参数、模板里 @click 没事件签名——全是表象，根子在配置断层。
为什么 <script setup> 里写 ref 没补全？
Vue 单文件组件（SFC）的 <script setup> 是编译时语法糖，VSCode 默认不理解。必须用 Volar（不是 Vetur）提供语言服务，且需禁用旧扩展干扰。
- 卸载所有带 “Vetur” 字样的扩展（它已废弃，与 Vue 3 冲突）
- 安装官方扩展：
Volar（发布者：Vue Language Features）和Volar: Vue Server（如未自动附带） - 确认 VSCode 右下角语言模式是
Vue（不是HTML或Plain Text）；点一下手动切过去 - 检查设置中
"vue.preferences.useVolarForJsTs": true（Volar 默认启用，但某些工作区可能被覆盖）
jsconfig.json 必须存在且含 compilerOptions.types
没有 jsconfig.json，VSCode 就当你的 .vue 文件是 HTML + JS 拼凑体，defineProps 和 defineEmits 会被当成普通函数，类型推导全丢。
- 在项目根目录新建
jsconfig.json，内容至少包含：
{
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"types": ["vue"]
},
"include": ["**/*.js", "**/*.vue"],
"exclude": ["node_modules"]
}
- 如果用了 TypeScript，改用
tsconfig.json，并确保"types": ["vue"]在compilerOptions里 -
"types": ["vue"]是关键——它让 JS/TS 语言服务知道defineProps等是 Vue 提供的全局宏，不是未定义变量 - 删掉这个文件，
props.立刻变灰色、无方法列表，就是它在起作用
模板里 <div @click=" 按 . 没反应？检查 vetur.grammar.customBlocks
Volar 默认只处理标准 <template>、<script>、<style> 块。如果你用了自定义块（比如 <docs> 或 <i18n>），或项目里混用了 Vetur 遗留配置，会破坏模板解析上下文。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 打开
settings.json，删掉所有以"vetur."开头的配置项（Vetur 已停更，残留配置会干扰 Volar） - 确认没有
"vetur.grammar.customBlocks"—— 这个配置会让 Volar 误判语法范围 - 重启 VSCode 后，打开一个
.vue文件，在<template>中输入<div @c，应立刻弹出@click、@change等事件建议 - 若仍无响应，运行命令面板（
Ctrl+Shift+P）→Developer: Toggle Developer Tools→ 查看 Console 是否报Failed to start Volar server
补全卡在 import { use 就不动？路径别名没声明
Vue 项目常用 @/components 这类别名，但 Volar 不读 vite.config.ts 或 webpack.config.js，它只认 jsconfig.json 里的 compilerOptions.baseUrl 和 paths。
- 在
jsconfig.json的compilerOptions下加：
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
}
- 改完保存，重启 VSCode（热重载不生效）
- 再输
import { useRoute } from '@，就能看到@/下所有路径，且进入后能继续补全模块导出项 - 注意：路径必须以
/*结尾，否则 Volar 不识别为可映射路径
最常被跳过的动作是删 Vetur 配置和重启编辑器——很多人改完 jsconfig.json 就以为好了，结果 Volar 被残留的 vetur.grammar 锁死在降级模式，补全永远差一层类型信息。
