推荐几款前端开发者钟爱的VSCode插件-VSCode-PHP中文网

live server、volar、eslint、prettier、vue helper 五款插件覆盖本地预览、vue语言支持、代码质量、格式统一和专项提效，但装错顺序或配错参数会阻塞开发流。

推荐几款前端开发者钟爱的vscode插件

Live Server、Volar、ESLint、Prettier、Vue Helper 这五款插件覆盖了本地预览、框架语言支持、代码质量、格式统一和 Vue 专项提效，基本够用——但装错顺序或配错参数，反而会卡住开发流。

默认 5500 端口被占时，VSCode 不会报错，只是静默失败。打开终端执行 lsof -i :5500（macOS/Linux）或 netstat -ano | findstr :5500（Windows）确认占用进程。

修改端口：在 VSCode 设置中搜 liveServer.settings.port，设为其他值（如 8080）或直接填 0 启用随机端口
只监听 HTML 文件：默认会响应所有变更，但 JS/CSS 修改不触发刷新。若需热更新，得配合 html-live-server 或改用 Vite 预览
跨域请求失败：该插件不带代理功能，调用本地 API 接口时需手动配置反向代理或换用 json-server + http-proxy-middleware

两者同时启用时，defineProps、defineEmits 会被识别为未定义变量，TS 类型推导也失效。这不是配置问题，是插件底层服务抢占。

PigX UI 前端开发

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

下载

卸载或禁用 Vetur：VSCode 扩展面板搜索 Vetur，点击齿轮图标 → Disable Workspace（推荐）或直接 Uninstall
确认 Volar 已激活：打开一个 .vue 文件，状态栏右下角应显示 Volar，而非 Vetur
项目级 TS 支持：确保 tsconfig.json 中包含 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]，否则 defineProps 类型不生效

ESLint 的 prettier 规则和 Prettier 插件本身会打架，比如分号、引号、括号换行等。不是谁“更权威”，而是谁先执行、谁被覆盖。

安装三者：必须同时装 eslint、prettier、eslint-config-prettier（用于关闭 ESLint 中与 Prettier 冲突的规则）
配置顺序不能错：extends 数组里，prettier 必须放在最后，例如 ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"]
VSCode 设置要对齐："editor.formatOnSave": true 且 "editor.defaultFormatter": "esbenp.prettier-vscode"，否则保存时可能只跑 ESLint 不格式化

部分 Windows 或远程开发环境里，alt + x 被系统或输入法劫持，表现为按下去没反应，或弹出意外菜单。

重映射快捷键：打开 VSCode 快捷键设置（Ctrl+K Ctrl+S），搜 vue-helper.expandSelection，双击绑定新组合，比如 Ctrl+Alt+X
仅在 .vue 文件生效：该命令默认作用域是 vue 语言模式，如果文件没正确识别为 Vue（比如后缀是 .html 但写了 Vue 模板），扩选不会触发
嵌套对象扩选不准：对 { a: { b: { c: 1 } } } 连续按 alt + x，第一次选 c: 1，第二次应选整个 b 对象，但有时会跳到外层 a——这是插件解析逻辑限制，非 bug