volar是vue 3官方推荐的唯一语言支持插件，必须禁用vetur以避免类型提示错乱、ref解析失败和defineprops类型丢失；其基于@vue/language-core深度集成vue编译器接口，精准推导响应式类型与模板语义。
不用装满，6 个核心插件就能覆盖 90% 前端日常开发场景——关键不是多，而是每个都得真能跳转、真能格式化、真能查错。
Vue 3 + TypeScript 项目必须配 Volar 而不是 Vetur
Vetur 在 Vue 3 的 <script setup></script> 和类型推导上会直接失效，比如 defineProps 返回值类型不识别、ref 响应式变量 hover 看不到类型、组件内 emits 声明后无补全。Volar 是官方推荐替代方案，它基于 @vue/reactivity 实现按需响应式计算，CPU 占用更低，且支持 TS 语言服务级的智能提示。
- 安装后需在 VSCode 设置中禁用 Vetur（否则两者冲突）
- 若项目用的是
tsconfig.json中的"compilerOptions": { "jsx": "preserve" }，Volar 默认不生效，要手动开启"vue.experimental.enableImportShadowing": true - 遇到
Property 'xxx' does not exist on type 'ComponentCustomProperties'错误，大概率是shims-vue.d.ts缺失或路径未被 TS 识别，不是插件问题
别名路径跳转失效？@/ 和 ~/ 需要插件+配置双保险
光装 别名路径跳转 插件没用，它只负责解析，不负责读取项目配置。VSCode 默认不认识 @ 指向 src，必须让插件知道你项目里 alias 怎么定义的。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Webpack 项目：插件配置项填
{"@": "./src", "~": "./src"}，路径必须是相对项目根目录的字符串 - Vite 项目：优先用
alias配置中的resolve.alias，但插件不自动读取，仍需手动同步到插件设置 - 如果跳转后打开空白文件，检查
jsconfig.json或tsconfig.json中是否漏了"baseUrl": "./"和"paths"配置
ESLint + Prettier 冲突时，别硬调规则，先关掉一个
常见症状是保存后代码反复格式化、缩进变来变去、分号忽有忽无——这不是配置写错了，而是两个工具在抢控制权。Prettier 负责“怎么排版”，ESLint 负责“对不对”，它们本不该管同一类事。
- 推荐策略：ESLint 只做逻辑和质量检查（如
no-console、react-hooks/exhaustive-deps），格式化完全交给 Prettier - 必须加
eslint-config-prettier插件，并在 ESLint 配置的extends最末尾引入，否则它的禁用规则不生效 - VSCode 设置里关掉
"editor.formatOnSave": false，改用 ESLint 的Fix on Save（需启用eslint.enable并设"eslint.run": "onType"）
调试时 console.log 写太多？用 Turbo Console Log 替代手敲
手敲 console.log('user:', user) 容易拼错变量名、漏括号、忘记删，而 Turbo Console Log 选中变量后快捷键一按，自动生成带上下文的输出语句，还能批量处理多光标。
- 默认快捷键
Ctrl+Alt+L（Windows），触发后生成类似console.log('user =>', user);的可读格式 - 支持自定义模板，比如加时间戳：
console.log('[%time%] user =>', user); - 注意：它不执行代码，只是插入文本，所以不会影响运行时性能，但也不会帮你过滤 undefined 或循环引用
真正卡住人的从来不是插件装得少，而是某个插件和项目配置没对齐——比如 Volar 找不到 tsconfig.json，或者别名插件读错了 Webpack 的 resolve.alias 结构。与其追着榜单装 20 个，不如把这 6 个配透，尤其确认它们和你脚手架的实际配置是否咬合得上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
