Prettier保存后未自动格式化，根本原因是格式化链路未打通：必须同时满足editor.formatOnSave:true、editor.defaultFormatter:"esbenp.prettier-vscode"，且对应语言（如[javascript]）启用格式化；项目需安装prettier包，配置文件语法正确。
为什么 Prettier 保存后没自动格式化？
不是插件没装好，而是 VS Code 的格式化链路没打通。关键在三个配置项是否同时生效：editor.formatOnSave、editor.defaultFormatter、[javascript].format.enable（或对应语言的启用开关）。
-
editor.formatOnSave必须为true，否则保存动作不触发格式化 -
editor.defaultFormatter必须明确设为esbenp.prettier-vscode，不能只装插件不指定默认 formatter - 对 TypeScript 文件，还要检查
[typescript].format.enable是否为true；Vue 单文件组件需额外开启[vue].format.enable - 如果项目根目录有
.prettierrc，但格式仍不一致，大概率是prettier版本与插件版本不匹配——建议统一用 npm 安装prettier@2.8.8（2026 年主流稳定版）
Live Server 热重载失效，但页面能打开
常见于 Webpack/Vite 项目或含构建步骤的场景。Live Server 本质是静态服务器，不监听构建产物变化，只响应原始 HTML 文件改动。
- 纯 HTML/CSS/JS 小项目：直接右键 →
Open with Live Server即可，端口默认5500 - Vue/React 项目：不要用 Live Server 启动，应运行
npm run dev，再配合Debugger for Chrome插件调试 - 想用 Live Server 又要热更新？只能手动配置代理：在
settings.json中加"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --new-window --remote-debugging-port=9222"，但这只是启动浏览器，不解决热重载 - 真正替代方案是
vscode-browser-preview插件——它把 Chromium 嵌入编辑器，支持 JS 断点和 DOM 实时编辑，但不支持本地file://协议下的跨域请求
ESLint 和 Prettier 冲突报红，怎么消掉？
不是规则写错了，是两者职责重叠导致重复校验。ESLint 负责逻辑/规范检查（如 no-unused-vars），Prettier 负责格式（如缩进、分号）。必须让 ESLint “让出”格式控制权。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安装
eslint-config-prettier，并在.eslintrc.js的extends数组末尾加入'prettier' - 确保
prettier插件已禁用 ESLint 的格式类规则：检查eslint-plugin-prettier是否存在，若存在且未配置，则删掉它——2026 年主流做法是用eslint-config-prettier+ 独立 Prettier 格式化 - VS Code 设置里关掉
eslint.packageManager自动检测，手动指定npm或pnpm，避免因包管理器差异导致规则加载失败 - 重启 ESLint server：按
Ctrl+Shift+P→ 输入ESLint: Restart ESLint Server
路径补全总找不到 @/components 下的文件
Path Intellisense 默认不识别别名，它只认真实文件系统路径。alias 映射由构建工具（Webpack/Vite）和 IDE 共同维护，缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 先确认
jsconfig.json或tsconfig.json中有正确配置："baseUrl": ".", "paths": { "@/*": ["src/*"] } - VS Code 需要重新加载 TS 服务：按
Ctrl+Shift+P→TypeScript: Restart TS server -
Path Intellisense插件设置中开启path-intellisense.mappings，手动映射："@": "${workspaceFolder}/src" - 如果用 Vite，还需在
vite.config.ts中同步配置resolve.alias，否则运行时会报错，而不仅是补全失效
