Live Server比Open in Browser更适合日常开发，因其启动真实HTTP服务解决跨域、模块加载及路径解析问题，支持保存即刷新和热重载；而后者仅打开file://协议文件，无法运行现代前端项目。
Live Server 为什么比 Open in Browser 更适合日常开发
Live Server 是前端本地预览的首选，不是因为它功能多，而是它解决了保存即刷新这个核心痛点。Open in Browser 只是打开文件，不启动服务，遇到 fetch 请求跨域、import 模块加载失败、相对路径解析错误等问题时直接报错，根本跑不起来。
- 必须用 HTTP 协议才能正确加载资源（比如
./assets/logo.png或import '@/utils'），Live Server 启动的是真实本地服务器，不是file://协议 - 默认端口
5500冲突时，可在设置里改"liveServer.settings.port": 3000，设为0表示随机端口 - 热重载依赖浏览器 WebSocket 连接，如果页面卡住没更新，先检查控制台是否有
WebSocket connection failed - 不支持 HTTPS，开发环境够用；生产环境部署必须换真实 Web 服务器
ESLint + Prettier 怎么配才不打架
这两个插件单独用都挺好，但一起装后常出现格式化完又被 ESLint 标红、保存反复修改的问题——本质是规则冲突，不是插件不好。
- 禁用 Prettier 的自动格式化：在设置中关掉
"prettier.enable": false，只让它作为 ESLint 的格式化引擎 - ESLint 配置里加
"extends": ["eslint:recommended", "plugin:prettier/recommended"]，确保 Prettier 规则被纳入校验流 - VSCode 设置中指定格式化工具：
"editor.defaultFormatter": "dbaeumer.vscode-eslint"，避免右键菜单里点“Format Document”调用错工具 - 项目根目录必须有
.eslintrc.cjs或.eslintrc.js，否则 ESLint 插件不生效，只显示“no config found”警告
Vue 开发别同时装 Vetur 和 Volar
这是 Vue 2 和 Vue 3 的兼容性雷区。Vetur 对 <script setup></script> 支持差，Volar 在 Vue 2 项目里会报一堆类型错误，两者共存会导致语法高亮错乱、跳转失效、甚至编辑器卡顿。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- Vue 2 项目：只装
vetur，卸载volar，并在设置里确认"vetur.validation.template": true - Vue 3（尤其带 TypeScript）：只装
volar，卸载vetur，启用"volar.takeOverMode": true让它接管所有.vue文件 - 如果项目是混合栈（部分 Vue 2 + 部分 Vue 3），建议按子包拆分，各自用对应插件，不要强行统一
- 重启 VSCode 后，打开一个
.vue文件，看右下角状态栏是否显示 “Volar” 或 “Vetur”，这是最直接的判断依据
路径别名跳转失效时该查什么
写 import { api } from '@/api' 却 Ctrl+点击进不去，不是插件没装，而是配置链断了。
立即学习“前端免费学习笔记（深入）”；
- 确认已安装
@lihuiwang.vue-alias-skip或path-alias类插件，但更关键的是项目级配置 - 检查
tsconfig.json或jsconfig.json中是否有"compilerOptions.baseUrl"和"compilerOptions.paths"，例如："@/*": ["src/*"] - VSCode 设置里搜
typescript.preferences.importModuleSpecifier，设为relative或non-relative要和项目实际路径策略一致 - 如果用了 Webpack/Vite 别名，但没同步到 TS 配置，跳转一定失败——TS 语言服务不读构建配置，只认
tsconfig
tsconfig.json 路径声明，或一行 editor.defaultFormatter 写错，就足以让整个环境“看起来装了，实际不能用”。 
