提升前端页面开发效率的VSCode插件-VSCode-PHP中文网

结论：只需优先安装eslint、prettier、auto rename tag、path intellisense、live server这5个插件，其余按需添加，避免拖慢编辑器；它们分别解决代码质量检查、格式统一、标签自动重命名、路径智能补全和本地服务自动刷新问题。

提升前端页面开发效率的vscode插件

直接说结论：别堆插件，先装这 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></template>、React 的 JSX 也生效。但有个关键限制：Auto Rename Tag 不处理自闭合标签（如 <img>、<input>），改了开始标签不会动结束部分——因为本来就没有结束标签。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

默认开启，无需配置；但若和其他标签插件（如 Vetur 或 Volar）冲突，优先禁用旧插件
在 Vue SFC 里修改 <div class="xxx"> 为 <code><section class="xxx"></section>，闭合标签自动同步，不用手敲
遇到嵌套过深（比如 5 层 <div>）时，光标停在最外层开始标签再改，插件才能准确定位对应闭合标签 <h3>Path Intellisense 对别名路径的支持依赖 jsconfig.json 配置</h3> <p>只装插件不配 <code>jsconfig.json，@/components/xxx 这种路径照样不能跳转、不能补全。VSCode 本身不理解 @ 是啥，得靠配置告诉它“@ 指向 src 目录”。
- 根目录下建 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 补全、图标美化、括号着色，属于「有更好，没有也不致命」。别贪多，先让这五个稳住再说。