Live Server、Volar、ESLint、Prettier、Vue Helper 五款插件覆盖本地预览、Vue语言支持、代码质量、格式统一和专项提效，但装错顺序或配错参数会阻塞开发流。
Live Server、Volar、ESLint、Prettier、Vue Helper 这五款插件覆盖了本地预览、框架语言支持、代码质量、格式统一和 Vue 专项提效，基本够用——但装错顺序或配错参数，反而会卡住开发流。
Live Server 启动后页面不刷新？检查端口和文件监听范围
默认 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
Volar 和 Vetur 冲突导致 Vue 3 <script setup> 报红？必须禁用 Vetur</script>
两者同时启用时，defineProps、defineEmits 会被识别为未定义变量，TS 类型推导也失效。这不是配置问题，是插件底层服务抢占。
- 卸载或禁用
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 一起用却格式混乱？关键在规则优先级
ESLint 的 prettier 规则和 Prettier 插件本身会打架，比如分号、引号、括号换行等。不是谁“更权威”，而是谁先执行、谁被覆盖。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 安装三者：必须同时装
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 不格式化
Vue Helper 的 alt + x 扩选失效？和 VSCode 默认快捷键冲突
部分 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
插件不是越多越好，真正卡住开发节奏的，往往是两个插件暗地互踩、一个配置项写错位置、或者快捷键被系统吞掉——这些细节比功能列表重要得多。
