前端开发环境配置必备的VSCode插件汇总-VSCode-PHP中文网

live server插件实现保存即刷新，但默认仅监听html类文件，css/js修改不触发刷新；需注意路径解析基准、端口占用、浏览器安全拦截等问题，正确配置工作区和根路径才能稳定运行。

前端开发环境配置必备的vscode插件汇总

改完 HTML 或 CSS 立刻看到效果，是前端开发最基础的刚需。Live Server 插件就是干这个的，启动后自动打开浏览器、监听文件变化、触发页面重载。它默认用 http://127.0.0.1:5500，不走本地文件协议（file://），所以能绕过大部分 CORS 限制。

容易踩的坑：

如果项目用了 fetch 或 axios 请求本地 API，而 API 服务跑在 localhost:3000，Live Server 默认不代理——得手动配 "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --disable-web-security"（仅调试用，不推荐长期开启）
多入口 HTML 文件时，右键菜单只对当前打开的文件生效；想指定启动页，需在项目根目录建 .vscode/settings.json，加："liveServer.settings.CustomBrowser": "chrome" 和 "liveServer.settings.Root": "./src"
它不支持 WebSocket 实时通信模拟，需要真实后端或用 ws-server 类工具补位

ESLint 检逻辑错误和潜在 bug，Prettier 管缩进、引号、换行这些“审美问题”。两者必须共存，否则一个报错、一个格式化，互相打架。

实操建议：

装插件后，务必在工作区 .vscode/settings.json 中启用保存时自动修复："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
Prettier 要设为默认格式化工具："editor.defaultFormatter": "esbenp.prettier-vscode"，否则右键“格式化文档”可能调用错引擎
若用 Vue/React，额外装 eslint-plugin-vue 或 eslint-plugin-react，否则 v-model 或 JSX 语法不会被校验
团队协作时，把 .eslintrc.cjs 和 .prettierrc 提交到 Git，避免本地配置漂移

写 import { debounce } from 'lodash' 时，你真知道它打包后塞进去多少 KB 吗？Import Cost 在编辑器里直接标出包体积，比如显示 ~4.2 kB，比翻文档快十倍。

PigX UI 前端开发

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

下载

注意点：

开一个 .vue 文件，如果只有基础语法高亮，说明你漏装了官方扩展包。它不只是加颜色——template 里写 v-if 有属性提示，script 里 defineProps 参数能跳转定义，style 里 lang="scss" 支持嵌套语法。

关键细节：

必须搭配项目里已有的 vue 版本（3.x 或 2.x），否则类型检查会报一堆 Cannot find module 'vue'
vetur 已废弃，别再装；新项目统一用 Vue Language Features (Volar)，它才是 Vue 3 + TS 的事实标准
如果 setup 语法里 ref 类型推导不准，检查是否开了 "vue.experimental.enableImplicitThis": true（Vue 3.4+ 推荐关闭）

插件不是越多越好，而是每个都得解决一个具体痛点。装完别急着重启，先打开一个真实项目文件，确认 ESLint 报错、Live Server 能热更、Import Cost 显示数字、.vue 文件里按住 Ctrl 能跳转——这才是配好了。