live server比open in browser更值得默认启用，因其启动真实http服务（如http://127.0.0.1:5500），支持fetch、websocket、相对路径及自动刷新；而open in browser仅用file://协议，无法运行依赖http的功能，且需手动刷新。
Live Server 为什么比 Open in Browser 更值得默认启用
Live Server 是前端本地开发的刚需，它不只是“打开网页”，而是建立一个真正可交互的本地服务。Open in Browser 只是用 file:// 协议加载 HTML，无法运行 fetch、WebSocket、相对路径资源引用等依赖 HTTP 协议的功能。
- 必须通过
Go Live按钮（状态栏右下角）启动，不是右键菜单——右键“Open with Live Server”在某些文件夹结构下会失效 - 端口冲突时，修改配置项
"liveServer.settings.port"即可，设为0表示随机端口，避免硬编码 - 若项目含
index.html但不在根目录，需配置"liveServer.settings.root"，否则 404 - 不支持 HTTPS，调试 Service Worker 或 mixed content 场景需换用
http-server或serve命令行工具
Auto Rename Tag 和 Auto Close Tag 的真实协作边界
这两个插件常被一起安装，但它们解决的是不同层级的问题：前者处理语义一致性，后者处理语法完整性。混用时容易因嵌套过深或 JSX 中的花括号干扰导致误操作。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
Auto Rename Tag在 Vue/React 中对<template></template>或<div> 标签有效，但对 <code><componentname></componentname>自定义组件名无效——它只匹配标准 HTML/XML 标签名 -
Auto Close Tag默认关闭 JSX 中的自闭合标签（如<img>），可通过设置"auto-close-tag.SublimeText3Mode": true改为更宽松行为 - 两者同时启用时，重命名
<section></section>可能触发两次自动补全，造成光标跳动；建议保留Auto Rename Tag，禁用Auto Close Tag改用 VSCode 内置的editor.autoClosingTags - 必须禁用 ESLint 的格式化能力：
"eslint.format.enable": false，否则 Prettier 的prettier.formatOnSave会被覆盖 - 推荐使用
eslint-config-prettier包统一关闭 ESLint 中与 Prettier 冲突的规则，而不是手动逐条关 - Vue 项目中，
vue/multi-word-component-names这类风格规则不会被 Prettier 处理，必须靠 ESLint 实时报错，不能指望保存时自动修复 - 如果
.prettierrc和.eslintrc.js都存在，且都设置了semi: false，但 VSCode 设置里又开了editor.formatOnSave，最终行为取决于哪个扩展响应更快——实际以 Prettier 扩展为准 - Vue 3 项目必须禁用 Vetur：
Ctrl+Shift+P→Extensions: Disable Extension→ 搜索Vetur→ 禁用 - Volar 默认启用
Take Over Mode，会接管所有.vue文件；若遇到 TypeScript 报错“Cannot find module”，检查是否误启用了 Vetur 的 TS 支持 - 使用
defineProps或defineEmits时，Volar 能推导出完整类型，但 Vetur 仅显示any—— 这不是配置问题，是架构限制 - 如果项目同时含 Vue 2 和 Vue 3 组件，不要试图“兼容共存”，应按目录隔离，并在工作区设置中为不同子文件夹指定不同语言模式
Prettier + ESLint 配合时最常被忽略的配置冲突点
装了 Prettier 和 ESLint 并不等于自动格式化生效——VSCode 默认不强制执行规则优先级，尤其当两者对同一问题（如引号、尾逗号）有相反要求时，会静默失败。
Volar 和 Vetur 在 Vue 3 项目里不能共存
Volar 是 Vue 3 官方推荐的语言服务器，Vetur 是 Vue 2 时代的遗留方案。两者底层机制冲突，强行共存会导致类型提示错乱、<script setup></script> 无法识别、甚至编辑器卡死。
vue 语言模式（右下角状态栏检查），再查 tsconfig.json 是否包含 "include": ["src/**/*"]。
