Live Server 启动后页面不刷新或“Go Live”无反应的根本原因是服务未成功启动，常见于：未保存的临时文件、非工作区模式（未通过“打开文件夹”加载）、根目录缺失index.html、端口被占、body标签被注释、浏览器缓存未禁用或路径解析错误。
Live Server 启动后页面不刷新，Go Live 按钮没反应怎么办
根本原因通常是插件未监听到文件变化，或项目结构不符合静态服务预期。不是所有 HTML 文件都能直接用 Go Live 启动——它只对当前打开的、且位于工作区根目录或子目录下的 .html 文件生效。
- 确认你正编辑的是一个真实存在的
.html文件（而非未保存的临时文件），且已保存（Ctrl+S） - 检查右下角状态栏是否显示
Go Live按钮；若没有，说明当前文件类型未被识别为可服务资源（比如打开了.js或.css） - 如果项目用了构建工具（如 Vite、Webpack），不要用
Live Server直接打开dist或build目录里的文件——它不处理 sourcemap，也不支持 HMR，仅适合纯静态开发 - 端口被占用时，
Live Server默认会 fallback 到随机端口，但不会报错提示；可在设置中搜索liveServer.settings.port显式设为0（自动分配）或固定值（如8080）
ESLint 和 Prettier 一起用，为什么格式化后反而报 ESLint 错误
这是规则冲突的典型表现：Prettier 负责格式，ESLint 负责逻辑与风格检查，两者默认规则有重叠（比如引号、分号、括号换行）。不协调时，Prettier 格式完的代码可能触发 ESLint 的“风格类”报错。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends中放在最后，用于禁用所有与 Prettier 冲突的规则 - VSCode 设置里要明确指定默认格式化工具：
"editor.defaultFormatter": "esbenp.prettier-vscode"，否则可能调用错 formatter - 禁用 ESLint 的自动修复（
"eslint.autoFixOnSave": false），改用保存时先 Prettier 格式化、再 ESLint 检查的顺序，避免反复拉扯 - 项目级配置优先于用户级设置——确保
.prettierrc和.eslintrc.js都放在项目根目录，而不是只配在 VSCode 用户设置里
Path Intellisense 补全路径时找不到 @/components 这类别名
插件本身不读取 Webpack/Vite 的 alias 配置，它只基于文件系统做路径推导。别名路径补全是“上下文感知”的，但需要你显式告诉它映射关系。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在项目根目录创建
jsconfig.json（JS 项目）或tsconfig.json（TS 项目），写入"baseUrl"和"paths"配置，例如：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } -
Path Intellisense会自动读取这些配置，但前提是文件存在且语法合法；少一个逗号或引号都会导致整个配置失效 - 如果用的是 Vite，还需确保
vite.config.ts中的resolve.alias与jsconfig.json保持一致，否则运行时能解析、编辑器补全却失败 - 重启 VSCode 或执行命令面板中的
Developer: Reload Window，让插件重新加载配置
Debugger for Chrome 断点不命中，launch.json 配置总出错
断点失效最常见原因是 sourcemap 路径映射错误，尤其在使用构建工具时。VSCode 不知道你源码里的 src/App.jsx 对应浏览器里加载的哪个 http://localhost:3000/assets/index.abc123.js。
立即学习“前端免费学习笔记（深入）”；
-
webRoot必须指向你本地开发服务器的根路径（通常是"${workspaceFolder}"），不是构建产物目录 - 关键字段
sourceMapPathOverrides很容易写错：例如 Vite 项目需配"webpack:///./src/*": "${webRoot}/src/*"，而 Create React App 是"webpack:///src/*": "${webRoot}/src/*" - 确保浏览器 DevTools 的 “Disable cache” 已勾选，否则可能加载旧版 sourcemap
- 调试前先确认 Chrome 已启用远程调试（启动时加
--remote-debugging-port=9222），或直接用 VSCode 自带的 Chromium 实例（"type": "pwa-chrome"）更省事
