Live Server必须替代Open in Browser，它支持保存自动刷新、局域网访问及自定义端口；Prettier与ESLint需配对禁用冲突规则；Auto Rename Tag须手动启用vue/jsx语言模式；别名路径跳转需jsconfig.json加专用插件协同生效。
VSCode本身不提供开箱即用的前端热重载、路径跳转、格式统一能力，必须靠插件组合补足。只装1–2个热门插件，大概率会遇到保存不格式化、@/路径点不开、改了HTML标签闭合标签不同步等问题。
Live Server 必须替代 Open in Browser
如果你还在用 Open in Browser 右键预览 HTML，开发节奏会被严重拖慢——它不监听文件变化，每次改完都得手动刷新。
- 安装
Live Server后，右下角出现Go Live按钮，点一下就起服务，自动打开浏览器并监听所有改动 - 默认端口是
5500，若冲突可在设置里改liveServer.settings.port，设为0表示随机端口 - 它支持局域网访问（比如用手机扫二维码预览），
Open in Browser只能本地file://协议，跨域、fetch、import全报错
Prettier + ESLint 不是“装了就行”，要配对禁用冲突规则
Prettier 负责代码“长得好不好看”，ESLint 负责“写得对不对”。但两者都管缩进、引号、分号，不协调就会互相打架——比如 ESLint 报错“缺少分号”，Prettier 又把它删掉。
- 必须在
.eslintrc.js的extends里加入'prettier'，并额外加'eslint-config-prettier'来关掉 ESLint 中所有和格式相关的规则 - VSCode 设置里要指定
"editor.defaultFormatter": "esbenp.prettier-vscode"，否则保存时可能调用错 formatter - 别忽略
"editor.formatOnSave": true，否则你得手动按Shift+Alt+F才触发
Auto Rename Tag 在 JSX/Vue 中默认不生效，要手动开
很多人装了 Auto Rename Tag，发现改了 <div> 闭合标签没变，其实是插件默认只启用 html 语言，对 vue 或 javascriptreact（即 JSX）是关闭的。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在
settings.json里加这行："auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact", "typescriptreact"] - 注意：Vue 单文件组件中
<template>块属于vue语言模式，<script>块是javascriptreact，两个都要列进去 - 如果改了不生效，检查当前文件右下角语言模式是否真的是
Vue或JavaScript React，不是的话点一下手动切过去
别名路径跳转（如 @/api）需要两层配置才真正可用
只装 Path Intellisense 或只配 jsconfig.json 都不够。前者只补全路径字符串，后者只服务 TypeScript 类型检查，VSCode 默认仍无法 Ctrl+Click 跳转。
- 先在项目根目录建
jsconfig.json，写清楚baseUrl和paths映射（比如"@/*": ["src/*"]） - 再装插件
Vue Alias Skip（专为 Vue）或Typescript Import Sorter（通用），它们才会读取jsconfig.json并激活跳转 - 重启 VSCode 或执行命令
Developer: Reload Window，否则新配置不加载
插件不是越多越好，而是每个都得确认它在你当前语言模式、文件类型、项目配置下真实生效。一个没配对的 ESLint 规则，比不装还容易误导人；一个没开语言支持的 Auto Rename Tag，只会让你以为插件坏了。
