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> 为 <code><section></section>，闭合标签还是
—— 这不是插件坏了，是它压根没监听
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></style> 块里要禁用 singleQuote，但在 JS 里必须启用——这种细节，靠插件默认值扛不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
