Live Server 页面不刷新的根本原因是未在正确上下文启动服务：必须通过“File → Open Folder”打开整个项目目录，而非单个HTML文件；仅对已保存的.html文件生效，且默认监听.html/.css/.js文件变更，不支持.scss/.ts等源码文件直接刷新。

Live Server 启动本地服务时页面不刷新

改完 HTML/CSS/JS 保存后浏览器没反应，大概率是没在正确的上下文里启动服务。Live Server 只对当前打开的文件夹根目录生效，不是单个文件——必须用 File → Open Folder 打开整个项目目录，再右键 HTML 文件点 Open with Live Server。

常见坑点：

• 直接双击打开 HTML 文件（路径是 file:/// 协议），Live Server 不会接管
• 端口被占用时默认失败但不报错，可在设置里把 liveServer.settings.port 改成 0 启用随机端口
• 如果项目用了构建工具（如 Vite、Webpack），别用 Live Server，它不处理模块解析和 HMR

ESLint + Prettier 冲突导致格式化乱掉

两者都做代码格式化，但规则打架：ESLint 关注逻辑错误和可维护性，Prettier 只管样式。不协调的话，保存一次可能触发两轮格式化，const a=1 被 ESLint 加空格，又被 Prettier 删掉，最后卡在中间态。

正确做法是让 ESLint 管“对不对”，Prettier 管“好不好”：

立即学习“前端免费学习笔记（深入）”；

PigX UI 前端开发

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

下载

• 装插件 esbenp.prettier-vscode 和 dbaeumer.vscode-eslint
• 在 VSCode 设置里关掉 editor.formatOnSave，只开 editor.codeActionsOnSave 并设为 { "source.fixAll.eslint": true }
• 加 eslint-config-prettier 到项目 ESLint 配置里，禁用所有和 Prettier 重叠的规则

Volar 在 Vue 3 <script setup> 中跳转失败

Volar 是 Vue 3 官方推荐的语言支持插件，但它默认启用“Take Over Mode”，会停用 TypeScript 插件。一旦项目里有 .ts 或 .d.ts 文件混用，类型推导和跳转就断掉。

解决方法很具体：

• 按 Ctrl+Shift+P 输入 Developer: Toggle Developer Tools，看控制台有没有 Volar: failed to resolve tsconfig 报错
• 确认项目根目录有 tsconfig.json，且 compilerOptions.types 包含 vue
• 在 VSCode 设置里搜 volar.stronglyTyped，勾选它；再搜 volar.autoInsertDotValue，关掉（避免模板中自动补全 .value）

Quokka 运行时报 ReferenceError: require is not defined

Quokka 默认用 Node.js 运行环境，但前端项目常依赖浏览器全局对象（window、document）或 ESM 模块。直接跑 import { foo } from './utils' 就会崩。

分场景处理：

• 纯算法/工具函数测试：在文件顶部加 // @ts-nocheck + // @quokka {"env": {"node": true}}，强制走 CommonJS
• Vue/React 组件逻辑片段：改用 // @quokka {"env": {"browser": true}}，并手动 mock window 和 document
• 想测真实组件渲染？别用 Quokka，上 Vitest 或 Playwright

真正卡住人的往往不是“该装什么”，而是“装了之后为什么不动”。比如 Volar 的 Take Over Mode、Quokka 的执行环境、ESLint 和 Prettier 的职责边界——这些细节不调清楚，插件反而变成干扰源。