Prettier保存时自动格式化不必关闭editor.formatOnSave，但需在项目级启用并配合.prettierrc配置；关键项如printWidth、semi、singleQuote须显式声明，ESLint共存时需通过eslint-config-prettier统一规则。
装对插件比多写100行代码更能省时间——真正卡住前端开发节奏的，往往不是逻辑，而是重复操作、格式争议、路径跳转失败、浏览器手动刷新这些“小摩擦”。
保存即格式化：Prettier 配置必须关掉 editor.formatOnSave 吗？
不是必须关，但默认开容易出问题。很多人一装 Prettier 就勾选 editor.formatOnSave，结果发现 CSS 里 @media 块被强行拆成多行、JSX 属性换行混乱、甚至 import 语句被重排打乱顺序。
- 真正稳妥的做法是：只在项目级启用，靠
.prettierrc控制行为，而不是全局开关 - 关键配置项必须显式声明：
printWidth: 100（避免 HTML 标签挤成一行）、semi: false（和 ESLint 规则对齐）、singleQuote: true - 如果项目已用 ESLint，务必装
eslint-config-prettier并在extends里最后引入，否则no-unused-vars和格式化会打架
HTML/Vue/JSX 标签名改了，闭合标签没同步？检查 auto-rename-tag 的语言白名单
默认情况下 auto-rename-tag 只对 html 生效，你在 Vue 文件里改 <div> 为 <section>，闭合标签还是 </div> —— 这不是插件坏了，是它压根没监听 vue 类型文件。
- 必须手动加配置：
"auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"] -
javascriptreact是 JSX 的真实语言 ID，别写成jsx或react，VSCode 不认 - 如果用了 TypeScript + JSX，还得加上
typescriptreact
路径跳转失效：为什么 @/components/Button.vue 点不进去？
VSCode 默认不认识 @ 别名，Ctrl+单击只会提示 “No definition found”。这不是插件没装，而是路径解析没配对。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 优先用官方方案：在项目根目录建
jsconfig.json或tsconfig.json，写入"baseUrl": ".", "paths": { "@/*": ["src/*"] } - 别依赖第三方插件如
vue-alias-skip，它只处理@，不处理~、#或自定义 alias（比如api指向src/api） - 改完配置后必须重启 VSCode 窗口，仅重载窗口（
Developer: Reload Window）不生效
Live Server 启动报错 Unable to launch browser: "browser" not found
这错误不是浏览器没装，而是 Live Server 插件找不到可执行路径，尤其在 macOS 或 Linux 上常见。
- 不要去改插件源码，直接在设置里搜
liveServer.settings.CustomBrowser，填"chrome"或"firefox" - Windows 用户若装了 Edge 多于 Chrome，得明确设成
"msedge"，否则它默认找chrome.exe - 如果用的是 Brave 或 Vivaldi 这类 Chromium 衍生浏览器，目前 Live Server 不支持自动识别，只能换用
Open in Browser插件临时顶替
最常被忽略的其实是配置的粒度：一个插件在不同项目里可能需要完全不同的参数组合，而不是复制粘贴 settings.json 就完事。比如 Prettier 在 Vue SFC 的 <style> 块里要禁用 singleQuote，但在 JS 里必须启用——这种细节，靠插件默认值扛不住。
