应禁用Vetur并启用Volar的Take Over Mode，因Vetur已停止维护且与Vue3不兼容，两者共存会导致defineProps报错、类型丢失、组件跳转失效等问题。

Vue3在VSCode里没语法高亮？不是插件没装，大概率是Vetur和Volar在打架。

为什么Volar必须禁用Vetur

Vetur是Vue2时代的插件，Volar才是Vue3官方维护的解析器。两者同时启用会导致：defineProps报错、ref类型丢失、emits不识别、组件跳转失效。VSCode默认可能自动启用Vetur，尤其当你打开过旧Vue2项目后。

实操建议：

• 打开VSCode插件面板，搜Vetur，点击「禁用」（不用卸载）
• 确认已安装Volar（作者：Vue Team），并在右下角状态栏看到「Vue (Volar)」字样
• 在项目根目录新建.vscode/settings.json，写入：

  {"files.associations": {"*.vue": "vue"}}

• 按 Ctrl+Shift+P 输入「Developer: Reload Window」重启窗口，清掉旧缓存

script setup里变量不提示？检查parserOptions.parser配置

ESLint报Cannot find name 'ref'或defineProps is not defined，不是少装依赖，而是它根本没把<script setup>当TypeScript处理。

立即学习“前端免费学习笔记（深入）”；

PigX UI 前端开发

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

下载

实操建议：

• 确保eslint.config.js中包含：

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

• 确认已安装@typescript-eslint/eslint-plugin和eslint-plugin-vue
• 如果用了unplugin-vue-components，需在globals里手动声明：

  { ref: 'readonly', reactive: 'readonly', defineProps: 'readonly' }

模板里v-model/v-for没补全？开启Take Over Mode

默认Volar不会接管全部HTML补全逻辑，<template>里写v-mo按Tab不展开，或者<el-button>关标签不自动同步——这不是bug，是没开接管模式。

实操建议：

• 按 Ctrl+Shift+P，输入「Volar: Enable Take Over Mode」并执行
• 该操作会修改.vscode/settings.json，添加"vetur.validation.template": false等配置
• 重启VSCode，此时<template>内支持完整属性补全、标签对联动、el-组件智能提示

最常被忽略的是「重启窗口」这一步——Volar的Take Over Mode和文件关联配置都依赖热加载机制，只改配置不重启，等于白配。