Live Server比Open in Browser更值得默认启用，因其支持热重载、局域网访问、自定义端口及启动自动打开浏览器，而后者仅一次性静态打开且无实时刷新能力。
Live Server 为什么比 Open in Browser 更值得默认启用
因为热重载是现代前端开发的刚需，而 Open in Browser 只能做一次性的静态打开。你改完一行 CSS，还得手动按 F5 —— 这种节奏在调试响应式或动画时尤其反人类。
用 Live Server 后，保存即刷新，且支持：
- 局域网访问（手机真机调试直接输
http://192.168.x.x:5500） - 自定义端口（在设置里改
liveServer.settings.port，设为0就自动分配） - 启动时自动打开浏览器（
liveServer.settings.donotVerifySite设为true可跳过 HTTPS 检查）
注意：如果项目用了 Webpack/Vite，别用 Live Server 启动主应用——它只适合纯 HTML/静态资源预览，否则会和 dev server 冲突。
Prettier 和 ESLint 共存时最常踩的坑
两者都管格式，但分工不同：Prettier 负责“怎么排版”，ESLint 负责“写得对不对”。强行让 ESLint 做格式检查，只会导致规则打架、保存时反复格式化又报错。
立即学习“前端免费学习笔记（深入）”；
正确做法是：
- 在
.eslintrc.js中extends加上'prettier'（用eslint-config-prettier关闭所有格式类规则） - 把
editor.defaultFormatter设为esbenp.prettier-vscode，仅让它接管formatOnSave - 保留 ESLint 的
saveAs或onType校验，专注逻辑错误和潜在 bug
典型症状：Ctrl+S 后代码缩进乱跳、引号忽单忽双、分号忽有忽无——基本就是没关掉 ESLint 的格式规则。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
路径跳转失效？先确认 jsconfig.json 是否生效
@/components/Button.vue 点不了？不是插件没装，很可能是 jsconfig.json 没被识别，或者路径映射写错了。
必须满足三个条件：
- 文件必须放在项目根目录（和
package.json同级），名字是jsconfig.json（不是tsconfig.json，哪怕你用 TS） -
"baseUrl"必须设为"."，不能是"./src"或空字符串 -
"paths"的 key 必须带通配符，比如"@/*": ["src/*"]，不能写成"@/": ["src/"]
VSCode 不会实时监听这个文件变化，改完记得按 Ctrl+Shift+P → 输入 Developer: Reload Window。
Vue 开发中 template 里变量点不进 data/methods
这不是 VSCode 默认能力，需要插件 + 配置双加持。光装 Volar 不够，还必须关掉旧的 Vetur（二者冲突），并确保开启 vue.inlayHints 和 vue.experimental.templateCompiler。
关键配置项：
-
vue.suggestions.autoImport设为true，否则组件名补全不了 -
vetur.validation.template设为false（禁用 Vetur 的模板校验） - 在
settings.json加上"typescript.preferences.includePackageJsonAutoImports": "auto"，不然import补全卡顿
最容易被忽略的一点：Vue 3 的 setup() 语法中，ref 和 computed 定义的变量，悬停提示依赖类型推导，如果没配好 shims-vue.d.ts，跳转照样失败。
