Live Server启动后页面不自动刷新，根本原因是其默认仅监听HTML、CSS、JS文件变更并整页重载，不支持HMR，也不监听dist/、.vue、.ts等非静态资源；需确保在项目根目录工作区中操作，且修改的是被监听的文件类型。
Live Server 启动后页面不自动刷新？
默认情况下，Live Server 只监听 HTML、CSS、JS 文件变更并触发浏览器重载，但不会监听构建产物（如 dist/ 下的文件）或非静态资源（如 JSON mock 数据）。如果你改了 src/ 下的 Vue/React 源码却没反应，说明你没配构建工具联动——它不是热模块替换（HMR）方案，只是个静态服务器。
常见解决路径：
- 确认你打开的是项目根目录（不是单个 HTML 文件），否则
Live Server无法正确识别工作区上下文 - 修改后保存文件时，检查右下角状态栏是否显示 “Reloading…” —— 若无提示，可能是文件未被监听（比如保存时用了 Ctrl+S 但编辑器未真正写入磁盘）
- 若用 Vite 或 Webpack，直接关掉
Live Server，改用vite preview或webpack serve，它们自带 HMR 和依赖追踪
ESLint + Prettier 冲突导致格式化失效？
两者规则打架是高频问题：比如 ESLint 要求分号，Prettier 默认不加；ESLint 认为双引号合法，Prettier 强制单引号。结果就是保存时反复格式化又报错，editor.formatOnSave 形同虚设。
必须做三件事：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 装
eslint-config-prettier并在.eslintrc.js的extends末尾加上它，关闭所有与格式相关的 ESLint 规则 - 在 VSCode 设置里把
editor.defaultFormatter设为esbenp.prettier-vscode，而非 ESLint 插件 - 禁用 ESLint 的自动修复（
eslint.enable保持 true，但关掉eslint.codeAction.onSave.fixAll），让 Prettier 全权负责格式，ESLint 只管逻辑错误
@/ 开头的路径无法 Ctrl+点击跳转？
Vue/React 项目常用别名（如 @/components/Button.vue）在 VSCode 默认不识别，Ctrl+点击会提示 “No definition found”。这不是插件故障，而是缺少路径映射配置。
两种可靠解法：
- 用官方推荐的
path-alias插件（注意不是已停更的旧版），安装后在settings.json中补全"path-alias.alias": { "@": "./src" } - 更彻底的方式：在项目根目录加
jsconfig.json（JS）或tsconfig.json（TS），写入"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }，VSCode 原生支持该配置，无需额外插件
Vue 文件里 template 中变量无法跳转到 data 定义？
这是 Vue 语言服务未激活或版本不匹配的典型表现。Vue 2 和 Vue 3 的 SFC 解析逻辑不同，插件若没对齐项目版本，就会丢失响应式数据的类型推导和跳转能力。
关键动作：
- 卸载所有非官方 Vue 插件（如过时的
Vetur），只保留Vue Language Features (Volar)（Vue 3 推荐）或Vetur（仅 Vue 2 项目） - 确认 VSCode 已启用 “Take over mode”：打开一个
.vue文件，右下角语言模式显示 “Vue (Volar)” 而非 “Vue”，否则跳转功能被禁用 - 如果用了
defineProps/defineEmits的组合式 API，确保compilerOptions.isCustomElement或globalProperties等配置没干扰类型推导
Auto Rename Tag 按下回车没反应，大概率是当前文件类型没被插件支持（如 JSX 中失效）；ESLint 报错但不标红线，说明 ESLint 进程根本没起来——先看输出面板里的 ESLint 日志，再查 node_modules 是否缺失依赖。 
