Live Server 启动后页面不刷新，根本原因是未通过“File → Open Folder”打开项目根目录，导致服务无法识别工作区；必须确保资源管理器显示文件夹名而非“NO FOLDER OPENED”，且避免与Webpack/Vite等构建工具共用。
Live Server 启动后页面不刷新？检查工作区根目录
Live Server 只对当前打开的「文件夹」生效，不是单个文件。如果直接用 File → Open File 打开一个 index.html，它无法启动服务或自动刷新——必须通过 File → Open Folder 打开整个项目根目录（比如含 src/ 或 public/ 的文件夹）。
常见错误现象：Go Live 按钮灰掉、点击无反应、浏览器打开空白页或 404。
- 确认 VS Code 左侧资源管理器显示的是文件夹名，而非“NO FOLDER OPENED”
- 若项目使用 Webpack/Vite 等构建工具，Live Server 不适用——它只服务静态文件，不代理构建产物
- 端口冲突时，
liveServer.settings.port可设为0启用随机端口，避免手动改配置
ESLint + Prettier 冲突报红？关掉重复规则
eslint-config-prettier 不是可选插件，而是必装补丁。否则 prettier.semi: false 和 ESLint 的 semi: "error" 会打架，导致保存时反复格式化又报错。
典型表现：编辑器右下角频繁弹出「Formatting failed」，或代码保存后缩进/引号/分号来回跳变。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
.eslintrc.js的extends数组末尾加上'prettier'（注意顺序：Prettier 规则必须放最后） - VS Code 设置里禁用
editor.formatOnSave对 ESLint 插件的启用，只留 Prettier 作为默认 formatter - 别装
prettier-eslint这类过时桥接插件，新版 Prettier 和 ESLint 官方已原生兼容
Vue 别名路径 @/xxx 点不动？不是插件问题，是 tsconfig.json 缺配置
装了 vue-alias-skip 或类似插件却仍无法 Ctrl+Click 跳转，大概率是项目缺少 TypeScript 路径映射声明。VS Code 的跳转能力依赖 tsconfig.json 或 jsconfig.json 中的 compilerOptions.paths。
Vue CLI 或 Vite 项目默认生成该配置，但手动搭建或迁移旧项目时容易遗漏。
- 在
tsconfig.json的compilerOptions下添加："baseUrl": ".","paths": { "@/*": ["src/*"] } - 修改后需重启 VS Code，或按
Ctrl+Shift+P运行TypeScript: Restart TS server - 纯 JavaScript 项目请用
jsconfig.json，结构同上，但无需compilerOptions.target等 TS 特有字段
Quokka 显示 “Cannot find module”？它不读 webpack.config.js
Quokka 默认以 Node.js 环境运行代码，不走项目构建流程。所以 import { foo } from '@/utils' 或 require('lodash/debounce') 会直接报错——它不认识别名，也不解析 resolve.alias。
这不是插件 bug，而是设计使然：Quokka 目标是轻量沙盒，不是完整构建模拟器。
- 临时方案：用相对路径
import { foo } from '../src/utils/index.js'（注意加.js后缀） - 长期方案：在 Quokka 配置中启用
quokka.nodeArgs并传入自定义ts-node，但复杂度陡增，多数场景不如直接用浏览器控制台调试 - React/Vue 组件无法直接运行：Quokka 不支持 JSX 编译或 Composition API 解析，别浪费时间配 babel-loader
jsconfig.json 缺失导致所有跳转失效，或者 eslint.config.js 用了 ESM 语法但 Node 版本太低。这些点不解决，装再多插件也白搭。 
