VSCode前端开发必备插件安装实战演示-VSCode-PHP中文网

live server启动失败或不刷新，根本原因是未通过“文件→打开文件夹”建立工作区，导致插件无法激活；须确保已保存的.html文件位于工作区中、右下角显示go live，且关闭防病毒软件拦截。

vscode前端开发必备插件安装实战演示

Live Server 插件不是装完就能用，常见问题是右键没“Open with Live Server”选项，或保存后浏览器不自动刷新。根本原因通常是项目没在正确上下文里启动。

必须通过 File → Open Folder 打开整个项目文件夹，不能只打开单个 index.html 文件——否则插件无法监听文件变更
检查右下角状态栏是否显示 Live Server 正在运行；没显示就说明没启动，右键菜单也不会出现
如果已启动但不刷新，确认设置了 files.autoSave 为 afterDelay 或 onFocusChange，纯手动 Ctrl+S 才触发刷新
某些防病毒软件或系统代理会拦截本地 http://127.0.0.1:5500 请求，可临时关闭测试

这个插件默认只对标准 HTML 标签生效，遇到自定义组件（如 <mybutton></mybutton>）或 JSX 语法时不会响应，不是 bug，是设计如此。

PigX UI 前端开发

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

下载

仅支持成对的、闭合的 HTML/XML 标签，<input> 这类自闭合标签不参与重命名
Vue 的 <template></template> 块内有效，但 SFC 中的 <script></script> 或 <style></style> 区域无效
React JSX 中，只有原生标签（<div>、<code><span></span>）能被识别，<button></button> 这类首字母大写的组件名会被忽略
若想强制启用，可在设置里搜索 autoRenameTag，把 html.autoRenameTag 设为 true，但对非 HTML 文件无作用

两者都抢着格式化 JS/TS 文件，结果一个加引号、一个去引号，一个换行一个压行，最终保存时反复“打架”。这不是配置错误，是职责重叠。

不要同时启用 eslint.format.enable 和 prettier.requireConfig —— 选一个作为主力格式器
推荐用 ESLint 做校验 + 修复（eslint.codeAction.showDocumentation 开启），Prettier 仅做保存时格式化（关掉 ESLint 的 auto-fix on save）
在 .eslintrc.cjs 里加 extends: ['plugin:prettier/recommended']，让 ESLint 主动兼容 Prettier 规则
VS Code 设置中禁用 editor.formatOnSave，改用 editor.codeActionsOnSave 配置为 {"source.fixAll.eslint": true}