Live Server保存后不自动刷新需确认三点：右下角显示并点击“Go Live”启用监听；修改文件必须位于服务根路径下的.html/.css/.js中；检查设置中liveServer.settings.donotVerifyFolder是否误设为true导致路径校验失效。
Live Server 保存后不自动刷新怎么办
默认安装后只启动服务，不开启热重载——这是新手最常卡住的点。关键不是插件没装对，而是没触发「监听模式」。
确认以下三点：
- 右下角状态栏必须显示
Go Live（不是灰色），点击它才能真正启用监听 - 修改的是被服务托管的文件：必须在当前工作区根目录或子目录下的
.html、.css、.js文件，不在该结构里的编辑不会触发刷新 - 检查设置里是否误关了自动刷新：
liveServer.settings.donotVerifyFolder设为true时会跳过路径校验，但若项目结构异常（比如多层嵌套入口），反而导致监听失效
临时验证方法：改完一个 .css 文件后，手动在浏览器地址栏按回车——如果样式生效，说明服务正常，问题出在监听路径；如果没反应，先检查文件是否在 Go Live 启动的根路径下。
Prettier 和 ESLint 冲突导致保存后代码乱掉
两者都格式化代码，但规则打架：ESLint 想加分号，Prettier 坚决不要，结果来回拉扯，光标乱跳、缩进错位。
立即学习“前端免费学习笔记（深入）”；
核心解法是让 ESLint 「让位」给 Prettier：
- 安装
eslint-config-prettier，并在.eslintrc.js的extends数组末尾加上'prettier' - VS Code 设置中关闭 ESLint 的自动修复：
eslint.autoFixOnSave设为false，只留editor.formatOnSave交给 Prettier - 项目根目录加
.prettierignore，把node_modules、dist、build这类生成目录排除，避免 Prettier 错误扫描
特别注意：如果用了 eslint-plugin-vue 或 eslint-plugin-react，也要对应加 eslint-config-prettier/vue 或 eslint-config-prettier/react，否则组件相关规则仍可能冲突。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
路径别名（如 @/components）Ctrl+点击无法跳转
写了 import Button from '@/components/Button.vue'，但 Ctrl+点击 @/components/Button.vue 没反应——这不是插件问题，是 VS Code 不知道 @ 指向哪。
必须双管齐下：
- 在项目根目录配
jsconfig.json（JS 项目）或tsconfig.json（TS 项目），写明"baseUrl": "src"和"paths": { "@/*": ["*"] } - 装插件
Path Intellisense，它读取上述配置并激活跳转；但注意它不处理 Vue 单文件组件内的<script setup></script>中的defineProps类型引用，那得靠Volar插件 - 重启 VS Code，或者用命令面板执行
Developer: Reload Window，否则配置不生效
常见陷阱：Webpack/Vite 配置了别名，但 jsconfig.json 没同步更新，VS Code 就永远找不到路径。别名必须在构建工具和编辑器配置里保持一致。
Vue/React 组件内模板语法高亮或属性补全失效
写 v-model 或 onChange 时没有提示，<template></template> 区域颜色灰白——大概率是语言服务没接管文件类型。
分场景处理：
- Vue 项目：卸载旧版
Vetur，装官方Volar（注意选「Volar」而非「Volar Legacy」），并在设置里关掉vetur.validation.template - React + TSX：确保
typescript.tsdk指向项目本地node_modules/typescript/lib，而不是 VS Code 自带的旧版本 TS，否则 JSX 类型推导会断 - 通用检查：右下角语言模式必须是
Vue或JavaScript React，不是Plain Text或HTML；点一下右下角文字可手动切换
复杂点在于：Volar 和 TypeScript 版本强耦合。2026 年主流用 TS 5.4+，若项目锁死 TS 4.9，就得降级 Volar 到 1.8.x，否则属性补全直接消失——这个兼容性坑，文档很少提，但实际高频发生。
