Vue 3 项目必须用 Volar 而非 Vetur，因二者底层语言服务冲突，共存会导致类型推导失效、ref 跳转失败、defineProps 无提示等问题；需禁用 Vetur、启用 Volar 并重启 VSCode。
为什么 Prettier 和 ESLint 不能只装一个
只装 Prettier 会格式化代码但不报错，只装 ESLint 可能格式混乱还互相打架。两者定位不同：Prettier 是“美容师”，管空格、换行、引号；ESLint 是“质检员”，管 undefined 访问、未声明变量、console.log 残留等逻辑问题。
常见错误现象：保存后代码被重排，但 React 的 key 缺失警告没出现；或者 ESLint 提示“missing semicolon”，而你明明关了分号规则——这大概率是没禁用 ESLint 里和 Prettier 冲突的格式类规则。
- 必须装
eslint-config-prettier插件，它会关闭所有与Prettier冲突的ESLint规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则右键格式化可能调用错工具 - 团队项目务必统一
.prettierrc和.eslintrc.js，尤其注意printWidth（推荐 100）和tabWidth（推荐 2）是否一致
别名路径跳转失效？不是 webpack 配置错了，是插件没配对
@/components/Button.vue 点不了跳转，90% 不是 vue.config.js 或 vite.config.ts 问题，而是 VSCode 没识别别名映射。Volar / Vetur 本身不处理路径解析，得靠额外插件补位。
使用场景：Vue 3 + Vite 项目中，import { api } from '@/api/user' 无法 Ctrl+Click 跳转；或 TypeScript 中 import type { User } from '@/types' 提示 “Cannot find module”。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 优先装
Path Intellisense，它能补全路径但不解决跳转 - 真正解决跳转要装
Alias Navigator或Vue Alias Skip，后者专为@别名优化 - 配置关键项：在 VSCode 设置里搜
alias，找到插件配置项，填入{"@": "./src"}，注意路径是相对工作区根目录，不是node_modules - 若用
tsconfig.json的baseUrl+paths，还需装TypeScript Toolbox同步识别
Live Server 启动失败或热更新不生效的三个硬坑
Go Live 按钮点完没反应，或改了 HTML 但浏览器不刷新——不是端口被占，而是插件运行机制被误触发。
常见错误现象：http://127.0.0.1:5500 打开空白页；修改 index.html 后需手动 F5；启动时报错 Unable to launch browser。
- 必须确保当前打开的是
.html文件，且文件已保存（未保存的临时文件不会触发服务） - 不要在终端里手动执行
live-server命令，VSCode 插件和 CLI 版本规则不同，容易冲突 - 热更新依赖文件系统监听，Windows 上杀毒软件（如 Defender 实时防护）常拦截，可临时关闭或添加工作区白名单
- 若用 Vue/React 脚手架开发，别用
Live Server启动整个项目——它只服务静态文件，不跑webpack-dev-server或vite的 HMR
Volar 和 Vetur 到底该选谁
Vue 3 项目装 Vetur 会丢类型提示、不支持 <script setup></script> 语法高亮，这不是你配置问题，是它已停止维护。官方明确推荐 Volar 替代。
性能影响：Volar 启动更慢（首次加载约 2–3 秒），但后续响应更快；Vetur 在大型 .vue 文件里容易卡顿，尤其含大量 v-for 嵌套时。
- Vue 2 项目继续用
Vetur，Vue 3 必须切Volar（包括 Nuxt 3、Quasar 2+） - 装完
Volar后，VSCode 右下角语言模式要手动切到Vue（不是HTML），否则语法高亮无效 - 若同时装了
Vetur和Volar，必须禁用Vetur，否则两者争抢.vue文件控制权，导致智能提示失效 -
Volar的Take Over Mode默认开启，会接管 TS 类型检查——这意味着你不能再依赖Vue Language Features单独插件
Volar 需要 TypeScript 插件配合才能正确推导 defineProps 类型，而 Path Intellisense 的路径补全又依赖 jsconfig.json 是否存在。这些细节不报错，但会让某项功能“看起来没用”，排查起来反而比写代码更耗时间。 
