结论：只需优先安装ESLint、Prettier、Auto Rename Tag、Path Intellisense、Live Server这5个插件，其余按需添加，避免拖慢编辑器；它们分别解决代码质量检查、格式统一、标签自动重命名、路径智能补全和本地服务自动刷新问题。
直接说结论：别堆插件，先装这 5 个——ESLint、Prettier、Auto Rename Tag、Path Intellisense、Live Server。其余插件按需加，否则反而拖慢编辑器启动和文件响应速度。
为什么 ESLint 和 Prettier 必须一起配
单独开 ESLint 会报一堆格式类警告（比如引号、分号、空格），但这些不是 bug；单独开 Prettier 又不报变量未定义、this 指向错误等真问题。两者规则重叠时还会打架——比如 eslint-config-prettier 就是专门关掉 ESLint 里所有和格式相关的规则的。
- 必须在
.eslintrc.js的extends里写['airbnb', 'prettier']，顺序不能反 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则保存时格式化可能失效 - 如果项目用 Vue3，额外加
plugin:vue/vue3-recommended，否则v-model、defineProps等语法不被识别
Auto Rename Tag 看似小，实际省掉大量手动改闭合标签时间
它不只是改 HTML 标签，对 Vue 的 <template>、React 的 JSX 也生效。但有个关键限制：Auto Rename Tag 不处理自闭合标签（如 <img />、<input />），改了开始标签不会动结束部分——因为本来就没有结束标签。
- 默认开启，无需配置；但若和其他标签插件（如
Vetur或Volar）冲突，优先禁用旧插件 - 在 Vue SFC 里修改
<div class="xxx">为<section class="xxx">，闭合标签自动同步，不用手敲 - 遇到嵌套过深（比如 5 层
<div>）时，光标停在最外层开始标签再改，插件才能准确定位对应闭合标签
Path Intellisense 对别名路径的支持依赖 jsconfig.json 配置
只装插件不配 jsconfig.json，@/components/xxx 这种路径照样不能跳转、不能补全。VSCode 本身不理解 @ 是啥，得靠配置告诉它“@ 指向 src 目录”。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 根目录下建
jsconfig.json（TS 项目用tsconfig.json），内容必须含"baseUrl"和"paths" - 示例配置：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@api/*": ["src/api/*"] } } } - 改完配置要重启 VSCode 或执行
Developer: Reload Window，否则路径补全不生效
Live Server 启动后页面不自动刷新？检查两个地方
常见现象是改了 HTML/CSS，浏览器没反应。不是插件坏了，而是默认监听范围太窄或服务没跑对端口。
- 默认只监听当前打开的文件所在目录及其子目录，如果项目结构是
src/index.html但你在根目录启服务，src/下的改动不会触发刷新 - 在设置里搜
liveServer.settings.donotVerifySignature，设为true（尤其用了 HTTPS 代理或公司内网时） - 端口冲突时，不要硬改成固定值，推荐设
liveServer.settings.port为0，让系统自动分配空闲端口
真正卡住开发效率的，往往不是功能缺失，而是路径跳不到、标签改漏、格式乱到不敢提交、改完代码还得手动刷页面。这 5 个插件覆盖了从写 → 检 → 改 → 跑的最小闭环，其余像 AI 补全、图标美化、括号着色，属于「有更好，没有也不致命」。别贪多，先让这五个稳住再说。
