Vue 3 项目必须用 Volar，Vetur 已停更且不支持 类型检查和 TS 类型推导，混用会导致 ref/computed 无类型提示、Ctrl+Click 跳转失效；需禁用 Vetur、启用 Volar 及 TypeScript Vue Plugin，并在 tsconfig.json 中配置 "types": ["vue"]。
Vue 项目该装 Volar 还是 Vetur？
Vue 3 项目必须用 Volar，Vetur 已停止维护且不支持 `<script setup>` 类型检查和 TS 类型推导。装错会导致模板内 <code>ref、<code>computed 等响应式 API 无类型提示，甚至 <code>Ctrl+Click 跳转失效。</script>
-
Volar需配合 VSCode 的“TypeScript Vue Plugin”启用（默认开启），否则defineProps和defineEmits无法识别 - 若项目混用 Vue 2 和 Vue 3，需在 workspace 设置中禁用
Volar，改用Vetur并手动关闭其 TS 支持，避免冲突 - 旧项目升级后出现 “Cannot find name ‘defineProps’” 错误，大概率是
Volar没启用或tsconfig.json缺少"vue": ["*"]在compilerOptions.types中
ESLint + Prettier 冲突怎么破？
保存时格式化后又报 ESLint 错误，本质是两者规则打架：比如 Prettier 强制单引号，而 ESLint 规则可能要求双引号。不解决就只能关掉一个，但质量保障和格式统一都丢了。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上'prettier'，它会关闭所有与 Prettier 重叠的规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，同时确保"editor.formatOnSave"为true - 不要在
.prettierrc里配semi: true，再让 ESLint 开semi规则——这是最常见冲突源头
路径导入总写错 ../../ 怎么办？
Path Intellisense 能自动补全相对路径，但默认不识别 @/ 别名。写 import X from '@/components/X.vue' 时它只会提示文件系统路径，不会映射到 src/。
- 需在项目根目录配置
jsconfig.json或tsconfig.json，声明"baseUrl"和"paths"，例如：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}} - VSCode 重启后才生效，不是装完插件就立刻可用
- 如果用的是 Vite，还需确认
vite.config.ts中resolve.alias与tsconfig.json一致，否则跳转能用、但 ESLint 可能报 “Unable to resolve path”
为什么 Bracket Pair Colorizer 2 不高亮嵌套括号？
装了插件却没颜色，不是插件坏了，而是 VSCode 默认关闭了括号高亮开关。尤其在 JSX 或 Vue 模板里多层 v-if/v-for 嵌套时，缺这个功能极易漏配对。
- 打开设置搜索
highlight matching bracket，勾选启用（它属于 VSCode 内置功能，不是插件控制） -
Bracket Pair Colorizer 2的颜色主题可在设置里调，但前提是先开这个开关 - 如果用了
indent-rainbow类插件，注意两者可能颜色冲突，建议只留一个用于结构可视化
实际项目里，Volar 和 Path Intellisense 的配置联动最容易被忽略：别名路径配置不对，Volar 的组件自动导入（vue.components.autoImport）就失效，连带模板里的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
