Vue 2 项目必须用 Vetur，Vue 3 项目必须用 Volar；二者底层架构不兼容，混用会导致语法高亮错乱、跳转失效、类型丢失，必须卸载或禁用其一并重启 VSCode。
VSCode 插件不是装得越多越好，而是要按需选、配得准、避得开冲突——尤其在 Vue/React 项目里，Vetur 和 Volar 同时启用会导致语法高亮错乱、Ctrl+Click 跳转失效，这种问题往往排查半天才发现是插件打架。
Vue 项目该装 Vetur 还是 Volar？
看 Vue 版本决定，不是看个人喜好：
- Vue 2 项目必须用
Vetur；Volar不支持options API的完整语义分析 - Vue 3（尤其是
<script setup></script>项目）优先用Volar，它对 TypeScript 类型推导更准，defineProps的类型提示不会丢 - 两者绝对不能共存：卸载一个前，先关掉另一个的「Enable」开关，再重启 VSCode，否则语言服务会卡死在“Loading…”状态
- 如果用了
Volar，记得在设置里打开volar.enable和volar.autoImport，否则组件自动导入不生效
格式化代码时 Prettier 和 ESLint 总打架怎么办？
根本原因是规则重叠：比如 prettier 要求不加分号，eslint 的 semi 规则却要求加——不协调就报红或保存后反复格式化。
- 装
esbenp.prettier-vscode和dbaeumer.vscode-eslint两个插件就够了，别装第三方“整合包” - 在
settings.json里明确指定默认格式化器："editor.defaultFormatter": "esbenp.prettier-vscode" - 关键一步：装
eslint-config-prettier并在.eslintrc.js的extends末尾加上'prettier'，它会关闭所有和 Prettier 冲突的 ESLint 规则 - 禁用 ESLint 的自动修复（
"eslint.autoFixOnSave": false），只让它标错；格式化全交给 Prettier 保存时触发
为什么 Live Server 刷新不了 CSS 修改？
常见于使用构建工具（Vite/Webpack）的项目，Live Server 是纯静态服务器，不识别 import './style.css' 或 @import 逻辑，只认 HTML 里直接写的 <link rel="stylesheet">。
- 确认你没在开发环境误启 Live Server：Vite 项目应该用
npm run dev启服务，而不是右键 HTML → “Open with Live Server” - 如果真要临时预览纯 HTML+CSS 文件，把 CSS 改成内联样式或
<link>标签引入，Live Server 才能监听到变更 - 浏览器缓存常被忽略：按
Ctrl+F5强刷，或在 DevTools 的 Network 面板勾选 “Disable cache” - Live Server 默认端口是 5500，若本地已有服务占用了，它不会自动换端口，会静默失败——看右下角状态栏有没有显示 “Starting Server at http://127.0.0.1:5500”
怎么让 import 路径自动补全不写错？
手写 ../../../components/xxx 容易漏点、多点，路径一深就懵，而 VSCode 原生不支持跨文件夹的相对路径智能提示。
- 装
import-sorter或path-intellisense：后者更轻量，输入./就弹出当前工作区下的文件树 - 在
jsconfig.json或tsconfig.json里配baseUrl和paths，比如"@/*": ["src/*"]，之后输@/api/就能补全 src/api 下的文件 - 注意：路径别名只对编辑器提示有效，运行时仍需构建工具（如 Vite 的
resolve.alias）支持，否则会报Cannot find module - 如果项目用 ESM，确保
type: "module"在package.json里，否则 Node.js 会拒绝解析@/别名
插件配置真正难的不是“怎么装”，而是“装完之后要不要动 settings.json、要不要配 jsconfig、要不要关掉另一个插件”。很多问题表面是功能失效，根子在多个插件对同一能力（比如格式化、跳转、类型检查）抢控制权。留心状态栏右下角的语言模式标识和小图标，那里常藏着真实的服务状态。
