vue 3 项目必须禁用 vetur 并启用 volar，否则会导致 跳转失效、ref 无类型提示、defineprops 不识别等问题；volar 是官方推荐语言服务器，需开启接管模式并配合 typescript vue plugin。
前端项目开发中，真正能每天用得上、不凑数的 VSCode 插件其实就那么十几款。装太多反而拖慢启动速度、干扰提示逻辑，甚至引发插件冲突——比如 Vetur 和 Volar 同时启用会导致 Vue 3 的 <script setup></script> 无法正确跳转或类型推导失败。
Vue 3 项目必须换掉 Vetur，用 Volar
如果你还在用 Vetur 开发 Vue 3（尤其是带 <script setup></script> 的 SFC），会遇到：模板中 ref() 变量悬停无类型、@click 事件参数推导为空、defineProps 类型不生效等问题。Volar 是官方推荐替代方案，它基于 @vue/reactivity 实现按需响应式追踪，性能更稳，且原生支持 TS + setup 语法。
- 安装后需在设置里关闭
Vetur的 HTML/JS/TS 语言服务（否则会抢语言服务器控制权） - 务必启用
Volar > Take Over Mode（接管模式），否则语法高亮和补全可能不完整 - 若项目用了
unplugin-vue-components自动导入，还需配合Volar > Server: Plugins > Auto Import开关
路径别名跳转失效？别硬记 @/src，用别名路径跳转插件
写 import { api } from '@/api/user' 时 Ctrl+Click 却打不开文件？这不是配置问题，是 VSCode 默认不识别 @ 这类别名。靠手动改 jsconfig.json 或 tsconfig.json 的 baseUrl + paths 只解决 TypeScript 类型检查，不解决编辑器跳转。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 推荐插件：
@ext:lihuiwang.vue-alias-skip（轻量、专一、无副作用） - 配置只需在 VSCode 设置里填入：
{"@": ["src"], "@api": ["src/api"]} - 注意：Webpack/Vite 的别名配置（如
resolve.alias）和这个插件互不依赖，两者都要配才完整
ESLint + Prettier 不要只装插件，关键在规则协同
装了 ESLint 和 Prettier 插件却依然格式混乱、保存后报错反复出现？大概率是规则打架。比如 prettier 要求单引号，eslint:recommended 却默认双引号；prettier 禁止分号，@typescript-eslint 规则又强制要求。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends末尾加入：'prettier' -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，但禁用"editor.formatOnSave"——改由 ESLint 插件统一处理（通过eslint --fix） - React/Vue 项目额外加
plugin:react/recommended或plugin:vue/vue3-recommended，避免漏掉框架特有规则
别让 Live Server 成为调试假象的帮凶
Live Server 启动的是纯静态 HTTP 服务，不走 Webpack/Vite 的构建流程。你改了 import 别名、用了 env 变量、写了 defineComponent，它都看不到，直接报 404 或 ReferenceError。
- 仅适用于纯 HTML/CSS/JS 小 demo 预览，或构建产物目录（如
dist/）下的查看 - 真实项目请用框架 CLI 自带命令：
npm run dev（Vite）、yarn serve（Vue CLI）、npm start（Create React App） - 需要快速验证某段 JS 行为？用
Quokka.js更准——它直接在 Node 环境执行片段，支持console.log实时值、it.only测试块等
真正影响效率的不是插件数量，而是每款插件是否精准切中一个具体痛点。比如 Import Cost 显示包体积、Turbo Console Log 自动生成带变量名的 log、Bracket Pair Colorizer 区分五层嵌套括号——这些功能一旦用熟，删掉就会明显卡顿。别贪多，先确保这四类场景（框架支持、路径跳转、代码规范、本地运行）每项都有一款插件稳稳托住，再考虑扩展。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
