VSCode中必看的前端辅助开发插件-VSCode-PHP中文网

live server必须启用自动刷新，因其通过本地http服务与websocket实现保存即同步更新，而手动f5会打断开发流；常见问题包括未打开.html文件、端口冲突或与webpack/vite等构建工具混用。

vscode中必看的前端辅助开发插件

改完 HTML/CSS/JS 立刻看到效果，不是“刷新浏览器”，而是浏览器自动同步更新——这是前端日常调试最省时间的环节。不启用自动刷新，等于退回手动 F5 时代。

常见错误现象：Go Live 启动后页面没反应、修改保存后页面无变化、控制台报 net::ERR_CONNECTION_REFUSED。

确保当前打开的是 .html 文件（非文件夹根目录），否则插件无法识别服务入口
检查设置中 liveServer.settings.AdvanceCustomBrowserCmdLine 是否被误设为 Chrome 的沙盒参数，会阻断本地连接
端口冲突时不要硬改成 8080 或 3000，直接设为 0 让插件自动分配更稳妥
若用 Webpack/Vite 脚手架项目，Live Server 不能替代开发服务器，仅适用于纯静态页或快速原型验证

两者同时启用却互相覆盖格式，是新手最常踩的坑：ESLint 报 semi 错误，Prettier 却坚持不加分号；或者 Prettier 格式化后 ESLint 立刻标红。

关键在于让 ESLint “闭嘴”关于格式的部分，只管逻辑和规范。

PigX UI 前端开发

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

下载

装两个插件：esbenp.prettier-vscode 和 dbaeumer.vscode-eslint
在 settings.json 中明确指定格式化工具："editor.defaultFormatter": "esbenp.prettier-vscode"
禁用 ESLint 的格式规则："eslint.validate": ["javascript", "typescript", "vue"]，并安装 eslint-config-prettier 消除冲突
别开 editor.formatOnSave 和 editor.codeActionsOnSave 双重触发，选其一即可；推荐只开 formatOnSave，更可控

写 .vue 文件时没有组件名补全、props 提示、v-model 类型推导，或写 JSX 时缺少 hooks 自动导入、组件提取功能，说明框架支持没到位。

官方插件比泛用型补全更可靠，因为它们读得懂 SFC 结构和框架生命周期。

Vue：必须装 Vue.volar（非旧版 VueHelper），它支持 <script setup></script> 语法和组合式 API 类型提示
React：ES7+ React/Redux/React-Native snippets 提供快捷片段，但真正提升效率的是 react-refactor ——选中 JSX 块右键就能 Extract Component
注意关闭重复插件：比如 Vetur 和 Volar 不能共存，VS Code 会提示禁用前者
若 ref 或 useState 类型不显示，检查 TS 版本是否 ≥4.9，低版本对新 React/Vue 类型支持不全

在构建后的项目里打不了断点、变量显示 undefined、调用栈全是 bundle.js:12345 ——大概率是 sourcemap 没对上。

本地开发服务器（如 Vite）默认开 sourcemap，但 VS Code 的调试器需要显式告诉它“源文件在哪”。

生成 .vscode/launch.json 后，重点确认 webRoot 指向的是开发服务器实际服务的路径（通常是 ${workspaceFolder}，而非 dist）
如果项目用了别名（如 @/components），需加 sourceMapPathOverrides 映射："webpack:///src/*": "${webRoot}/src/*"
Chrome 浏览器里按 F12 打开 DevTools，切换到 Sources 面板，看左侧是否能展开原始 .ts 或 .vue 文件；不能则配置失败
Vue 项目建议配合 Vue.js devtools 浏览器扩展一起用，光靠 VS Code 断点看不到响应式状态变化