Vue 3 项目必须禁用 Vetur、安装官方 Volar 插件、启用 Take Over Mode 并确保 .vue 文件语言模式为 vue，否则语法高亮、类型提示和跳转功能将失效。
VSCode 插件不是装得越多越好，而是得按项目类型和当前阶段精准选装——尤其对刚上手 Vue 或 React 的人，装错插件（比如在 Vue 3 项目里还用 Vetur）会导致语法高亮失效、TS 提示错乱、甚至 Ctrl+Click 跳转失败。
Vue 3 项目必须换掉 Vetur，改用 Volar
Vetur 是 Vue 2 时代的主力插件，它不支持 Vue 3 的 Composition API 类型推导，也不兼容 <script setup></script> 语法。装了 Vetur 后再开 Volar，两者会冲突，导致 ref、defineProps 等类型提示全丢。
- 卸载
Vetur：扩展面板搜Vetur→ 点“禁用”或“卸载” - 安装
Volar：搜索Volar，认准作者是Vue官方团队（图标带 Vue logo） - 启用
Take Over Mode：安装后右下角状态栏点Volar→ 选Take Over Mode，它会接管整个语言服务，关掉内置 TS 支持避免冲突 - 如果项目用了
unplugin-vue-components自动导入，记得在tsconfig.json里加"types": ["unplugin-vue-components/types"]，否则defineComponent类型可能报错
ESLint + Prettier 配合出问题？先检查配置顺序
常见现象是保存时格式化没反应，或者 ESLint 报错但 Fix on Save 不生效。根本原因不是插件没装，而是规则打架：ESLint 想加分号，Prettier 想删分号，谁也不让谁。
- 只装两个插件：
ESLint（作者：Microsoft）和Prettier（作者：Esben Petersen） - 在项目根目录加
.eslintrc.cjs，内容里必须包含extends: ['eslint:recommended', 'prettier']，最后一项是关键——它把 ESLint 规则里和 Prettier 冲突的部分关掉 -
settings.json里设"editor.defaultFormatter": "esbenp.prettier-vscode"，且关闭"editor.formatOnSave"，把格式控制权完全交给 ESLint 的eslint.format命令 - 如果用了
eslint-plugin-vue，确保它的版本和 Vue 版本匹配（Vue 3 项目用plugin:vue/vue3-essential，别用vue/essential）
Live Server 和 Open in Browser 别混用
这两个插件启动方式不同，直接决定你能不能调试 Ajax 请求、读取 localStorage、甚至用 fetch 加载本地 JSON 文件。
立即学习“前端免费学习笔记（深入）”；
-
Open in Browser是 file:// 协议打开，浏览器会拦截跨域请求，fetch('./data.json')直接报错 -
Live Server启的是 http://127.0.0.1:5500/ 这类本地服务，所有现代 Web API 都能跑，适合真实开发环境模拟 - 右键菜单里看到 “Open with Live Server” 才算生效；如果只有 “Open in Default Browser”，说明没在项目根目录打开文件夹，或者插件没启用
- 如果项目用到了
webpack-dev-server或vite，就别开Live Server，否则端口冲突，浏览器打不开
别忽略 vscode-icons 和 Bracket Pair Colorizer 这类“小工具”
它们不写业务逻辑，但天天盯着看——图标混乱会让找 src/components 花 10 秒，括号颜色不对会让嵌套的 v-if + v-for 模板一眼看不出闭合位置。
-
vscode-icons安装后，在设置里搜icons theme→ 选VSCode Icons，它会自动识别.vue、.ts、.scss文件并配图标 -
Bracket Pair Colorizer已被 VSCode 1.68+ 内置的Highlight Matching Bracket替代，不用额外装；但得手动打开设置："editor.bracketPairColorization.enabled": true - 如果用 Tailwind CSS，顺手装
Tailwind CSS IntelliSense，它能让 class 名补全、颜色预览、响应式断点提示全都有，比纯靠记忆高效得多
插件配置最麻烦的地方不在安装，而在「关掉什么」——比如 Volar 开启 Take Over Mode 后，就得关掉 TypeScript 的内置语言功能，否则两个服务抢着解析同一个文件，CPU 占用飙升。这类隐性开关，文档里常一笔带过，但实际踩坑最多。
