前端开发VSCode插件使用避坑指南-VSCode-PHP中文网

必须禁用vetur，因volar与vetur底层架构不兼容，共存会导致defineprops报错、跳转失效、emits不识别；volar专为vue3设计，需禁用vetur、手动关联.vue为vue语言模式、配置tsconfig.json包含"vue"类型声明并重启ts服务。

前端开发vscode插件使用避坑指南

Vue 3 项目里 Volar 和 Vetur 同时启用，defineProps 报错、跳转失效、emits 不识别——这不是代码写错了，是插件冲突了。

禁用 Vetur 是硬性前提，不是可选项

VS Code 默认可能同时激活 Vetur 和 Volar，但它们解析 .vue 文件的方式根本不同：Vetur 面向 Vue 2，Volar 才专为 Vue 3 的 setup() 和类型推导设计。两者共存会导致语言服务“打架”，比如：

defineProps 被标红，提示 “not defined”，实际是 Vetur 没法解析组合式 API
Ctrl+Click 点击组件名跳不到源码，因为 Vetur 的语义分析层被 Volar 绕过
模板里 v-model 或 on:click 的类型提示消失

实操建议：

PigX UI 前端开发

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

下载

打开扩展面板，搜 Vetur，点击「禁用」（不是卸载）
确认已安装官方 Volar 插件（作者：Vue Team），并在工作区启用
在项目根目录加 .vscode/settings.json，强制关联：
```
{"files.associations": {"*.vue": "vue"}}
```
执行 Developer: Reload Window，否则旧缓存仍走 Vetur 解析器

`ESLint` 报 `ref` 未定义？解析链断了

用 @typescript-eslint/parser 处理 .vue 文件时，如果不告诉 ESLint “<script setup></script> 里的内容要交给 TypeScript 处理”，它就会当成纯 JS 解析，自然不认识 ref、defineProps 这些顶层绑定。

实操建议：

在 .eslintrc.cjs 的 parserOptions 中必须包含：

{ parser: '@typescript-eslint/parser', extraFileExtensions: ['.vue'] }

确保已安装 @typescript-eslint/eslint-plugin 和 eslint-plugin-vue，且 extends 包含 'plugin:vue/vue3-recommended'
如果用了 unplugin-vue-components 自动导入，ESLint 不会自动感知，需在 globals 中显式声明：
```
{ ref: 'readonly', reactive: 'readonly', defineProps: 'readonly' }
```