vue 3项目必须用volar，禁用vetur；否则.vue文件高亮失效、ref类型丢失、defineprops不识别——这是插件冲突而非配置问题，需彻底禁用vetur并确认右下角显示“vue (volar)”。
Vue 3项目里Volar和Vetur不能共存，装错一个就直接导致.vue文件语法高亮失效、ref类型推导丢失、script setup内defineProps不识别——这不是配置问题，是插件冲突。
Vue开发必须用Volar，Vetur得彻底禁用
VSCode默认不识别.vue单文件组件的结构，Volar是Vue官方维护的现代语言支持插件，专为Vue 3 + TS设计。Vetur是Vue 2时代的产物，两者底层解析器互斥：
- 装了Vetur再装Volar，
script setup里的defineEmits会报红，提示“cannot find name” - 即使手动在
settings.json里设置"files.associations": {"*.vue": "vue"}，Vetur仍会劫持语法服务 - 解决方法不是“配置优先级”，而是彻底卸载Vetur或在扩展面板中禁用它
- 确认生效：打开任意
.vue文件，右下角状态栏应显示“Vue (Volar)”，而不是“Vue”或“Vetur”
debugger for chrome连不上Vue项目？先检查launch.json里的url和webRoot
常见现象是断点打上但不触发，控制台没输出，或者报错Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222。这基本不是端口被占，而是调试配置没对上运行环境：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
url必须和实际启动地址完全一致，比如npm run dev输出的是http://localhost:5173/，那url就得写成"http://localhost:5173"（结尾不加/） -
webRoot要指向构建后的真实根目录，Vite项目通常填"${workspaceFolder}"，而Vue CLI项目得是"${workspaceFolder}/dist" - 如果用了Vite的
base配置（如base: "/my-app/"），url就得改成"http://localhost:5173/my-app" - 别漏掉
"sourceMaps": true，否则断点会落在打包后的chunk里，根本没法调试源码
ESLint + Prettier一起用，editor.codeActionsOnSave比formatOnSave更可靠
很多人配了"editor.formatOnSave": true却发现保存后代码没按ESLint规则修复，只做了基础缩进。这是因为Prettier和ESLint职责不同，且VSCode默认不把ESLint当格式化器用：
-
editor.formatOnSave只调用editor.defaultFormatter指定的工具（通常是Prettier），它不会执行ESLint的--fix - 真正起作用的是
editor.codeActionsOnSave里的"source.fixAll.eslint"，它会在保存时主动触发ESLint修复逻辑 - 必须同时安装
esbenp.prettier-vscode和dbaeumer.vscode-eslint两个插件 - 推荐配置组合：
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"], "prettier.semi": false, "prettier.singleQuote": true }
Path Intellisense补全@/路径失败？检查jsconfig.json是否正确定义baseUrl和paths
输入import { foo } from '@/utils'时没自动补全，不是插件坏了，大概率是路径映射没生效。VSCode本身不理解@/这种别名，全靠jsconfig.json或tsconfig.json声明：
-
jsconfig.json必须放在项目根目录，内容至少包含：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - 如果项目用TS，优先用
tsconfig.json，且确保"include"字段包含src目录 - Volar插件会读取这个配置，但Vetur不会——又一个Volar不可替代的理由
- 改完配置后，重启VSCode或执行命令面板里的
Developer: Reload Window，否则缓存会导致补全不更新
最常被忽略的其实是Volar的codeLens开关：如果script setup里看不到组件名跳转或defineProps参数提示，去设置里搜volar.codeLens，确保scriptSetupTools是true。这个开关默认开，但某些旧版本或重装后可能被重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
