Live Server 页面空白或404主因是未以文件夹打开项目、缺少index.html、路径含中文/空格或端口冲突；ESLint与Prettier需配置解耦规则避免冲突；Path Intellisense须手动映射别名路径。
Live Server、ESLint、Prettier 这三个插件不配好，你写的 HTML/JS 代码基本等于裸奔——没热更新、没错误拦截、格式全靠手抠。
Live Server 启动后页面空白或 404
常见现象是点击右下角 Go Live 按钮后浏览器打开空白页，地址栏显示 http://127.0.0.1:5500/ 但报 404，或者路径里多出一层文件夹名。
- 必须确保当前打开的是**文件夹**（File → Open Folder），而不是单个 HTML 文件；单文件模式下 Live Server 不识别上下文根路径
- 检查项目根目录下是否有
index.html；没有时它不会自动 fallback 到你正在编辑的文件，而是返回 404 - 如果用了自定义端口（比如设为
3000），确认没被其他进程占用；可临时改回0（随机端口）快速验证 - 遇到跨域请求失败（如 fetch API 报 CORS），不是插件问题——Live Server 本身不带代理功能，得换
webpack-dev-server或加http-proxy-middleware
ESLint 报错但 Prettier 格式化后又触发 ESLint 再报错
典型表现：保存后代码被 Prettier 自动加了分号，但 ESLint 规则设的是 semi: ["error", "never"]，于是立刻标红。
- 根本原因是两个工具规则冲突，不能靠“谁先执行”解决，必须在配置层解耦
- 在
.eslintrc.js中明确禁用所有格式类规则：extends: ["airbnb", "prettier"]，且确保已安装eslint-config-prettier - VSCode 设置里关掉
editor.formatOnSave（如果用 ESLint 自带 fix），或只留editor.defaultFormatter设为esbenp.prettier-vscode，二者选其一 - 别在
package.json的scripts里混用eslint --fix和prettier --write，顺序错一次就可能覆盖对方结果
Path Intellisense 跳不到 @/components 别名路径
写了 import Button from '@/components/Button.vue'，Ctrl+点击却提示 “No definition found”，但项目运行完全正常。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Path Intellisense 默认不读
jsconfig.json或tsconfig.json的paths配置，得手动开启 - 在 VSCode 设置中搜索
path-intellisense.mappings，点“Edit in settings.json”，填入：{ "path-intellisense.mappings": { "@": "${workspaceFolder}/src" } } - 如果项目用 Vite，且
vite.config.ts里有resolve.alias，Path Intellisense 不认这个——它只认自己配置或jsconfig.json的compilerOptions.baseUrl+paths - 重启 VSCode 才生效；改完配置不重启，插件缓存会继续按旧路径解析
Quokka 在 JSX/TSX 文件里不显示实时值
在 React 组件里写 const a = 1 + 1;，右键启动 Quokka，但变量值没浮在右侧，控制台也无输出。
- Quokka 默认不支持 JSX 语法解析，需在文件顶部加注释指令：
// @ts-nocheck或// @quokka-start - 确保当前文件是
.tsx后缀；.jsx文件需额外安装@quokka-js/react插件包（非 VSCode 插件，是 npm 包） - 如果用了 SWC 或 Bun 编译器，Quokka 可能无法识别其语法扩展；临时切到 TypeScript 官方编译器再试
- 别在
useEffect或事件回调里写 Quokka 表达式——它只执行顶层同步代码，异步逻辑不会触发实时计算
插件不是装上就灵，关键在配置和边界认知：Live Server 不是 webpack，ESLint 不是 Prettier，Quokka 也不等于浏览器控制台。每个插件都有明确的能力半径，越清楚它的“不管什么”，就越少掉坑里。
