Vue 3 项目必须使用 Volar 而非 Vetur，因 Vetur 已停更且仅支持 Vue 2，混用会导致 ref 类型提示失效、defineProps 泛型不识别、模板中 @click 参数类型丢失；需禁用 Vetur、安装启用官方 Volar 插件、重启 VSCode 并配置 tsconfig.json 支持路径别名。
Vue 3 项目必须用 Volar，不是 Vetur
Vue 3 的响应式系统、组合式 API 和类型推导深度依赖 Volar，而 Vetur 只支持 Vue 2，且与 Volar 冲突。装了 Vetur 还没关掉，ref 类型提示失效、defineProps 泛型不识别、模板中 @click 参数类型丢失——全是这个原因。
操作上只需两步：
- 卸载或禁用
Vetur（VSCode 设置里搜 “Vetur”，勾掉 “启用”） - 安装并启用
Volar（官方插件 ID：vue.volar） - 重启 VSCode 后，打开任意
.vue文件，按Ctrl+Click跳转defineComponent，能进源码就说明生效
template 里写 props.xxx 没提示？检查 defineProps 是否带泛型
Vue 3 的模板类型提示不是自动开启的，它完全依赖 defineProps<{...}>() 的显式声明。只写 defineProps({}) 或 defineProps(['xxx'])，模板里就只有基础字符串补全，没有类型安全和属性提示。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
const props = defineProps<{
title: string
count?: number
disabled: boolean
}>()
注意点：
- 必须用 TypeScript 泛型语法，不能用
as断言 - 如果用了
withDefaults，泛型仍需完整声明所有字段（含可选），否则默认值字段在 template 中会提示 “可能为 undefined” - 脚手架生成的
script setup默认不启用类型推导，需确认项目有tsconfig.json且包含"vueCompilerOptions"配置
保存时自动修复 ESLint 报错，但 eslint.autoFixOnSave 已废弃
VSCode 旧版配置里的 eslint.autoFixOnSave 在 2022 年后已被弃用，继续写它不会生效，也不会报错——只是静默失效。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
当前唯一可靠方式是用 editor.codeActionsOnSave：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
同时确保：
- 项目根目录存在
.eslintrc.js（或.eslintrc.cjs），且已启用plugin:vue/recommended - VSCode 设置中
eslint.enable为true - 若使用 Volar，还需在
settings.json中加"[vue]": { "editor.defaultFormatter": "vue.volar" }，避免 Prettier 和 ESLint 格式化打架
import 自动补全不工作？别只靠插件，要配 jsconfig.json 或 tsconfig.json
VSCode 的路径自动导入（比如输入 use 就弹出 useRouter、useStore）不是插件单独决定的，它依赖项目级的模块解析配置。没配 compilerOptions.paths，再强的插件也猜不出你把 @/composables 映射到了哪。
最小可用配置（以 tsconfig.json 为例）：
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@c/*": ["src/composables/*"],
"@u/*": ["src/utils/*"]
}
}
配完记得重启 TS 服务：VSCode 命令面板（Ctrl+Shift+P）→ 输入 “Restart TS server” → 回车。之后 import { use 才会真实列出项目内所有 useXXX 函数。
容易忽略的是：Volar 的类型服务默认读取 tsconfig.json；如果项目用 JS + JSDoc，就得用 jsconfig.json，且结构必须一致，否则路径提示直接消失。
