真正能提升日常编码效率的插件是补全、校验、预览、路径、格式化五大关键角色：auto close tag与auto rename tag解决html/jsx标签手动闭合与同步痛点；es7+ snippets和volar分别提供react/vue片段补全与语言服务；prettier与eslint需协同配置实现“检查+格式化”闭环；path intellisense自动提示文件路径但不支持别名解析。
真正能提升日常编码效率的插件，不是装得越多越好，而是挑对几个关键角色：补全、校验、预览、路径、格式化。其他功能要么内置已够用，要么用一次就闲置。
HTML/JSX 编写时标签总要手动闭合？用 Auto Close Tag 和 Auto Rename Tag
这两个插件解决的是最频繁的手动操作痛点：写 <div> 忘关、改 <code><header></header> 忘同步尾标签。它们不依赖语言模式，对 .html、.vue、.tsx 文件都生效。
-
Auto Close Tag 在输入 <div> 后敲 <code>> 就自动生成
，但注意它不会处理自闭合标签（如
<img>），这类仍需手动或靠 Emmet
Auto Rename Tag 改 <section></section> 为 <main></main> 时，会同时更新闭合标签；但如果光标不在开始标签上，它可能失效——必须把光标停在起始标签内才触发
两者都默认启用，无需配置；但若和 Emmet 冲突（比如同时启用了 Emmet 的自动闭合），建议关掉 Emmet 的 emmet.triggerExpansionOnTab 避免重复补全
写 React/Vue 组件总在 import 和模板结构上卡壳？优先装 ES7+ React/Redux/GraphQL/React-Native snippets 和 Volar
框架相关插件里，片段补全和语言服务是两个不可替代的层级：前者省键盘，后者保类型和跳转。
-
ES7+ React/Redux/GraphQL/React-Native snippets 提供像 rfc（函数组件）、useE（useEffect）这类前缀，但注意它不支持 TypeScript 类型推导——写 rfc 出来的组件没有泛型或 Props 定义，得自己补
-
Volar 是 Vue 3 的事实标准语言服务器，替代已停更的 Vetur；装完必须禁用 Vetur，否则两者冲突导致 <script setup></script> 无法识别、类型提示错乱
- Vue 用户如果还用 Vue 2，
Volar 默认不支持，得在设置里加 "volar.ignoreProjectName": ["vue2"] 并手动启用兼容模式，否则 SFC 中的 export default 语法会报错
代码一保存就格式混乱？配好 Prettier + ESLint 而不是只装一个
单独装 Prettier 只管“怎么排版”，单独装 ESLint 只管“写得对不对”。真正在项目里不翻车，得让它们协同工作。
PigX UI 前端开发
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
下载
- 装插件只是第一步，关键在配置：必须设
"editor.defaultFormatter": "esbenp.prettier-vscode"，并开启 "editor.formatOnSave": true，否则保存时不格式化
-
ESLint 插件需要项目里有 .eslintrc.js 或 eslint.config.js 才能运行；没配置文件时它不报错也不提示，容易误以为“装了就有用”
- 常见冲突点：
Prettier 关掉分号，ESLint 却开 semi: error——结果保存后立刻报 ESLint 错误。解决方案是用 eslint-config-prettier 关闭所有与 Prettier 冲突的规则
路径导入老手误写相对路径？Path Intellisense 能帮你，但要注意它不解析别名
这个插件在 import 或 require 语句里输入引号后，自动列出当前目录及子目录下的文件，对无构建工具的纯 HTML/JS 项目很友好。
- 它默认不识别
@/components 这类 Webpack 或 Vite 别名，除非你手动配置 "path-intellisense.mappings"，例如：{"@": "${workspaceFolder}/src"}
- 在 monorepo 项目中，它无法跨 package 自动提示，比如从
packages/app 导入 packages/utils 的模块，得靠 Typescript 的路径映射或 Node.js Modules Intellisense 补充
- 它对 CSS/SCSS 的
@import 也生效，但不支持 postcss-import 的别名解析，这点常被忽略
插件不是越多越强，而是每个都得清楚它在哪起作用、在哪失效。比如 Live Server 适合静态页调试，但跑不了 React/Vue 的构建流程；Quokka 适合 JS 原型验证，却没法替代单元测试。真正卡住开发节奏的，往往不是缺插件，而是某个插件开着却没配对、或者多个插件暗中互斥。
