应禁用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></script>当TypeScript处理。
实操建议：
- 确保
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></template>里写v-mo按Tab不展开，或者<el-button></el-button>关标签不自动同步——这不是bug，是没开接管模式。
实操建议：
- 按
Ctrl+Shift+P，输入「Volar: Enable Take Over Mode」并执行 - 该操作会修改
.vscode/settings.json，添加"vetur.validation.template": false等配置 - 重启VSCode，此时
<template></template>内支持完整属性补全、标签对联动、el-组件智能提示
最常被忽略的是「重启窗口」这一步——Volar的Take Over Mode和文件关联配置都依赖热加载机制，只改配置不重启，等于白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
