VSCode插件安装与前端项目兼容性指南-VSCode-PHP中文网

vue 3 项目必须装 vue language features (volar)、typescript vue plugin (volar) 并启用 take over mode，禁用 vetur；三者顺序错误或缺失会导致 v-model 补全失效、.vue 报红及启动失败。

vscode插件安装与前端项目兼容性指南

插件装错版本或顺序，Vue 3 项目里 v-model 补全失效、.vue 文件报红、甚至 npm run dev 启动失败——这不是你代码写错了，大概率是插件冲突或缺失核心支持。

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 类型

两者都格式化代码，但规则打架会导致保存时反复“拉锯”：一行加引号、下一次又删掉；分号忽有忽无。关键不在装不装，而在怎么配：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

必须安装 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 特有规则不会被检查

它默认只监听 HTML 标签，而 Vue 单文件组件中的 <template></template> 是独立语言模式（vue-html），需手动开启支持：

打开设置（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 就没机会介入

前端项目本身已依赖大量 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”