Vue 3 项目必须装 Vue Language Features (Volar)、TypeScript Vue Plugin (Volar) 并启用 Take Over Mode，禁用 Vetur；三者顺序错误或缺失会导致 v-model 补全失效、.vue 报红及启动失败。
插件装错版本或顺序，Vue 3 项目里 v-model 补全失效、.vue 文件报红、甚至 npm run dev 启动失败——这不是你代码写错了，大概率是插件冲突或缺失核心支持。
Vue 3 项目必须装的三个插件及其顺序
Vue 3（尤其是基于 Vite 的项目）对插件有明确依赖链，装错顺序会导致语言服务无法启动：
-
Vue Language Features (Volar)是 Vue 3 官方推荐的语言服务器，必须启用且禁用旧版Vetur（二者冲突，同时启用会直接让.vue文件失去语法高亮和类型提示） -
TypeScript Vue Plugin (Volar)是配套扩展，提供setup()内脚本的类型推导，不装它，ref和computed的类型提示基本失效 -
Volar: Take Over Mode需手动触发（命令面板输入Volar: Switch to Take Over Mode），启用后 VSCode 才会把.vue当作单文件模块整体处理，否则模板区{{ }}内表达式不识别 TypeScript 类型
eslint 和 prettier 插件共存时的配置陷阱
两者都格式化代码，但规则打架会导致保存时反复“拉锯”：一行加引号、下一次又删掉；分号忽有忽无。关键不在装不装，而在怎么配：
- 必须安装
esbenp.prettier-vscode和dbaeumer.vscode-eslint两个插件 - 在工作区
.vscode/settings.json中强制指定格式化器："editor.defaultFormatter": "esbenp.prettier-vscode" - 关闭 ESLint 的自动修复：
"eslint.format.enable": false（否则它会在保存时抢在 Prettier 前格式化，造成冲突） - 确保项目中有
.eslintrc.cjs或.eslintrc.js，且extends包含plugin:vue/vue3-recommended，否则v-if缺少key这类 Vue 特有规则不会被检查
为什么 Auto Rename Tag 在 Vue 模板里有时不生效
它默认只监听 HTML 标签，而 Vue 单文件组件中的 <template> 是独立语言模式（vue-html），需手动开启支持：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 打开设置（
Ctrl+,），搜索auto rename tag - 找到
Auto Rename Tag: Enable Auto Rename Tag，确保勾选 - 关键一步：在同页面搜
files.associations，点击“在 settings.json 中编辑”，添加："*.vue": "vue"（告诉 VSCode 把 .vue 当 Vue 模式处理，而非纯 HTML） - 如果仍无效，检查是否启用了
Volar的Take Over Mode——未启用时，Volar 不接管模板区域，Auto Rename Tag就没机会介入
插件太多导致 VSCode 启动慢、npm run dev 热更新延迟
前端项目本身已依赖大量 Node.js 工具链，插件再监听文件变化，容易形成双重监听风暴：
- 禁用非当前项目必需的插件：比如 React 项目关掉
ESLint-plugin-react，Vue 项目关掉React Refactor - 检查插件是否开启“文件监视”：在插件详情页看是否有
watch、file watcher类描述，这类插件（如某些 CSS 预处理器辅助工具）建议按需启用 - 给
node_modules加排除：在 VSCode 设置中搜索files.exclude，确认包含"**/node_modules": true，否则插件可能扫描整个依赖树 - 最隐蔽的一点：
Live Server插件和 Vite 自带的开发服务器不能共存——前者会起一个额外 HTTP 服务，导致端口占用或热更新失效，Vue/Vite 项目请直接用npm run dev，别右键“Open with Live Server”
真正卡住项目的，往往不是某个插件功能多强大，而是它和项目构建链路之间那层没对齐的“信任关系”：Volar 是否接管了模板？ESLint 是否知道你在用 Vue 3？Prettier 是否被允许成为最终格式化拍板人？这些细节不调平，再多插件也白装。
