真正提升前端开发效率的是精准配对的少数插件：Prettier与ESLint必须协同配置，Live Server需按项目类型正确使用，Auto Rename Tag受限于文件类型与嵌套深度，Material Icon Theme依赖语言模式匹配，插件应少而精避免冲突。
装对插件比换电脑更能提升前端开发效率——不是所有插件都值得开箱即用，真正起效的往往就那几个，而且必须配对使用、按需启用。
为什么 Prettier + ESLint 不能只装一个
单独装 Prettier 会导致格式化后被 ESLint 报错；只装 ESLint 又容易因风格规则冲突反复手动改代码。两者必须协同，否则保存即报错是常态。
- 先装
esbenp.prettier-vscode和dbaeumer.vscode-eslint - 在项目根目录加
.eslintrc.js，extends里必须包含prettier（如['airbnb', 'prettier']） - 再加
eslint-config-prettier依赖，它会关闭 ESLint 中所有与 Prettier 冲突的规则 -
settings.json中设"editor.formatOnSave": true，但务必同时设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则 VS Code 可能调用 ESLint 自带的格式器导致失败
Live Server 不是“点一下就热更新”那么简单
很多新手以为装了 Live Server 就万事大吉，结果改完 .vue 文件没反应，或本地图片路径 404——根本原因是它默认只服务静态文件，不处理构建产物或模块解析。
- 纯 HTML/CSS/JS 原生项目：右键 → “Open with Live Server” 即可，端口默认
5500 - Vue CLI 或 Vite 项目：别用 Live Server，直接
npm run dev；Live Server 对import、assets引用等无感知 - 需要局域网访问时，在
settings.json加："liveServer.settings.port": 3000和"liveServer.settings.host": "0.0.0.0" - 若页面中引用了
./src/assets/logo.png却 404，说明路径没映射——Live Server 不读jsconfig.json或vite.config.ts，得手动把资源放./assets/下并改路径
Auto Rename Tag 看似简单，但有三个隐藏限制
这个插件确实能改开标签自动同步闭标签，但它的行为高度依赖语法识别精度，不是所有场景都生效。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 仅对
.html、.vue、.jsx、.tsx文件生效，.svelte或自定义模板语法需额外配置语言关联 - 嵌套过深时（比如 6 层以上
div），可能因 AST 解析超时而漏同步，建议拆分组件 - 写成
<my-comp></my-comp>这种自闭合形式时，插件不触发重命名；必须是<my-comp></my-comp>才能双向联动 - 如果重命名后闭标签没变，检查是否禁用了
"auto-rename-tag.enableAutoRenameTag": true（默认开启，但某些主题插件会覆盖设置）
Material Icon Theme 的图标不是“装了就香”
图标好看的前提是文件扩展名和语言模式匹配准确——VS Code 靠文件后缀和顶部语言选择器判断类型，一旦错配，图标就变成问号或默认文档图标。
- 打开
.vue文件却显示 JS 图标？点击右下角语言模式（如 “JavaScript”），选 “Vue” 手动切换 - 项目里用了
@/components/别名，但Path Intellisense没配jsconfig.json，图标不会识别@路径下的文件为 Vue 组件 - 图标颜色太淡看不清？在
settings.json加："material-icon-theme.activeIconPack": "vue"或"material-icon-theme.folders.theme": "specific" - 注意：图标包本身不提供功能，只影响视觉识别效率；如果团队用 Monorepo，建议配合
Project Manager插件区分 workspace，避免图标混杂
插件越多，越容易互相干扰——比如 Prettier 和 Beautify 同时启用会打架，ESLint 和 TSLint 共存会让错误提示重复出现。留够一个插件的“呼吸空间”，比堆满十个更重要。
