live server比open in browser更值得默认启用，因其解决“改完就看到效果”的闭环，而后者仅解决打开文件；需配置port防冲突，局域网预览要设root和host，避免与webpack-dev-server等重复启服务。
VSCode插件不是装得越多越好，而是要按实际开发链路选配——真正卡住你写代码、调试、协作的环节，才是该上插件的地方。
Live Server 为什么比 Open in Browser 更值得默认启用
保存后浏览器不自动刷新，本质是开发流程断点。Open in Browser 只解决“打开”这一步，而 Live Server 解决的是“改完就看到效果”这个闭环。
- 必须配置
"liveServer.settings.port"避免端口冲突，尤其当你同时跑多个前端项目时，默认 5500 容易被占 - 如果项目用
webpack-dev-server或vite dev，别再开 Live Server——它会起第二个服务，反而导致热更新失效或跨域问题 - 局域网预览需手动开启：
"liveServer.settings.root": "./dist"（指向构建后目录）+"liveServer.settings.host": "0.0.0.0" - 常见报错
ERR_CONNECTION_REFUSED多因防火墙拦截或端口被占，先执行lsof -i :5500（macOS/Linux）或netstat -ano | findstr :5500（Windows）查进程
ESLint + Prettier 协同配置最容易翻车的三个地方
两者不是简单装上就能用，规则重叠、执行顺序、修复时机稍有偏差，就会出现“保存后格式乱了又报 ESLint 错误”的死循环。
-
eslint-config-prettier必须加在extends数组末尾，否则它的禁用规则会被前面的规则覆盖 -
"editor.codeActionsOnSave": {"source.fixAll.eslint": true}和"editor.formatOnSave": true不能共存——Prettier 负责格式，ESLint 负责逻辑，让 ESLint 只做检查和修复（如no-console），格式全交给 Prettier - Vue 项目中，
vue-eslint-parser版本必须与eslint-plugin-vue匹配，否则.vue文件 template 区域直接不校验，错误静默丢失
Path Intellisense 在 TypeScript 项目里失效的典型原因
路径补全看起来是小功能，但一旦失效，import 语句就得手敲一长串相对路径，效率直降。
- 插件只读
jsconfig.json或tsconfig.json中的"baseUrl"和"paths"，不识别vite.config.ts或webpack.alias - 若用
@/components/Button.vue这类别名，确保tsconfig.json里已声明："baseUrl": ".", "paths": { "@/*": ["src/*"] } - 重启 VSCode 不生效？执行命令面板
Developer: Reload Window，而不是简单关再开——插件注册依赖完整加载周期 - 补全候选里没显示
.vue文件？检查files.associations是否设为{"*.vue": "vue"}，否则插件无法识别文件类型上下文
Vetur 已废弃，Vue 3 开发现在靠什么撑起智能提示
Vetur 停更后，Vue 官方推荐的替代方案是 Vue Language Features (Volar)，但很多人装了仍没效果，核心在于“启用方式”和“TS 支持开关”。
- 必须禁用 Vetur，否则两个插件冲突，
template区域语法高亮和跳转全部失效 - Vue 3 + TS 项目需开启
"vue.experimental.enableTemplateCompiler": true（在settings.json），否则defineProps类型推导为空 -
volar的Take Over Mode是关键：点击状态栏右下角 Vue 图标，选Take Over Mode，否则 TS 语言服务仍走默认路径，ref的类型提示不会出现在 template 中 - 组件自动导入（
autoImport）依赖unplugin-vue-components插件配合，仅靠 Volar 本身不提供该能力
插件配置真正难的不是找对名字，而是理解每个插件在工具链里的职责边界——比如谁管格式、谁管类型、谁管路径、谁管服务，边界模糊了，问题就藏在看似正常的表象之下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
