VSCode插件影响体验的关键在于安装配置而非数量：需检查editor.formatOnSave是否启用、files.associations是否误配、禁用与Live Server冲突的emeraldwalk.runonsave；Vue3项目须单独配置.vue关联和autoImportComponent等选项，并在更新插件后手动重载窗口。
VSCode插件装多了反而拖慢启动速度、触发冲突或覆盖关键设置，真正影响开发体验的不是“装没装”，而是“怎么装、装哪些、怎么配”。
插件安装前必须检查的三项配置
很多报错（比如 Auto Rename Tag 不生效、Live Server 打不开页面）其实和插件本身无关，而是环境预设没对齐：
- 确认已启用
editor.formatOnSave—— 否则JS-CSS-HTML Formatter或Prettier安装后完全没反应 - 检查
files.associations是否误配：例如把.vue文件强制关联成html，会导致Vue VS Code Tools的语法高亮和自动导入失效 - 禁用默认的
emeraldwalk.runonsave类插件——它和Live Server的自动刷新逻辑冲突，会重复触发构建或导致 404
Vue3项目中 Vue VS Code Tools 的避坑配置
官方插件在组合式 API 场景下容易漏掉类型提示或组件自动导入，问题常出在语言模式识别上：
- 务必在项目根目录创建
.vscode/settings.json，写入：{"vue.autoImportComponent": true, "vue.suggestions.enabled": true} - 不要依赖全局设置，每个 Vue3 项目都应单独配置
"files.associations": {"*.vue": "vue"} - 若使用
defineComponent+withDefaults，需确保 TypeScript 版本 ≥ 5.0，否则Vue VS Code Tools无法推导 props 类型
Live Server 和 Open in Browser 别同时开
两者功能重叠但机制不同，共存时容易出现端口占用、路径解析错误或双刷新：
立即学习“前端免费学习笔记（深入）”；
-
Live Server适合开发静态页面或简单 demo，启动后自动监听http://127.0.0.1:5500/ -
Open in Browser更轻量，只做一次性的file://路径打开，适合快速预览单个 HTML 文件 - 如果项目用了 Vite 或 Webpack，这两个插件都该关掉——它们不识别 dev server 的热更新路径，反而干扰真实开发流
最常被忽略的一点：插件更新后，VSCode 不会自动重载其配置项。改完 settings.json 或插件设置，必须手动按 Ctrl+Shift+P → 输入 Developer: Reload Window 才能生效。
