前端开发效率进阶的VSCode插件实践-VSCode-PHP中文网

prettier保存后未自动格式化，根本原因是格式化链路未打通：必须同时满足editor.formatonsave:true、editor.defaultformatter:"esbenp.prettier-vscode"，且对应语言（如[javascript]）启用格式化；项目需安装prettier包，配置文件语法正确。

前端开发效率进阶的vscode插件实践

为什么 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 文件改动。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

纯 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 “让出”格式控制权。

安装 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，否则运行时会报错，而不仅是补全失效