Vue 3 项目必须使用 Volar 而非 Vetur，因 Vetur 已停更且仅支持 Vue 2，混用会导致类型推导失效、ref 跳转失败、defineProps 无提示等问题；需彻底卸载 Vetur、安装 Volar 及 TypeScript Vue Plugin、配置 tsconfig.json/jsconfig.json 的 paths 路径映射，并重启 VSCode。
Vue3项目必须配Volar，不是Vetur
Vue3项目里装Vetur会直接导致TypeScript支持失效、<script setup>语法报错、组件属性补全丢失。Volar是Vue官方2022年起主推的替代方案，专为Composition API和TS设计。
实操建议：
- 卸载所有旧版Vue插件（尤其是Vetur），重启VSCode
- 安装
Volar和Vue Language Features (Volar)两个扩展（后者常被忽略） - 在项目根目录加
jsconfig.json或tsconfig.json，确保"compilerOptions": { "allowJs": true }开启 - 如果仍不识别
defineProps或defineEmits，检查VSCode右下角语言模式是否为「Vue」而非「HTML」
Prettier + ESLint 冲突时优先关掉ESLint的格式规则
常见现象是保存后代码被反复格式化又报错，比如单引号变双引号、分号消失又被标红。这不是配置错了，而是ESLint在做它不该管的事——格式化。
正确做法是让Prettier管格式，ESLint只管逻辑和规范：
立即学习“前端免费学习笔记（深入）”；
- 安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上'prettier' - 禁用ESLint中所有与格式相关的规则，例如
quotes、semi、indent - VSCode设置里确认
"editor.defaultFormatter"是esbenp.prettier-vscode，且"editor.formatOnSave"为true - 别信“同时启用两个格式化器更保险”——它们根本不在一个维度上工作
路径别名跳转失效？光装插件没用，得配jsconfig.json
装了 Path Intellisense 或 vue-alias-skip 却点不了 @/components/xxx.vue，大概率是本地没有声明路径映射。VSCode不读webpack/vite.config.ts里的resolve.alias，只认jsconfig.json或tsconfig.json。
关键步骤：
- 在项目根目录新建
jsconfig.json（TS项目用tsconfig.json） - 写入：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@assets/*": ["src/assets/*"], "@api/*": ["src/api/*"] } } } - 改完立刻重启VSCode，不要只重载窗口——否则路径缓存不会刷新
- 验证方式：在任意
import语句里按住Ctrl（Win）或Cmd（Mac）悬停路径，能跳转才算成功
Tailwind类名不提示？缺的是IntelliSense，不是插件本身
装了 Tailwind CSS IntelliSense 却没提示，不是插件坏了，而是它默认只对.html、.vue、.tsx等特定后缀生效。JS/TS文件里的字符串模板（比如className={\`text-${size}-lg\`}）默认不处理。
解决办法很窄但有效：
- 打开VSCode设置，搜索
tailwind.intellisense.includeLanguages - 点击「Edit in settings.json」，添加：
"tailwindCSS.includeLanguages": { "javascript": "html", "typescript": "html", "javascriptreact": "html", "typescriptreact": "html" } - 再在JSX里输入
class或className，就能触发Tailwind类名补全了 - 注意：这个配置不会让插件去解析JS逻辑，只是告诉它“把这段字符串当HTML类名来查”
