根本原因是热重载依赖flutter run进程活跃、Dart插件正确识别项目且状态栏显示Flutter设备；需开启dart.hotReloadOnSave设置（仅对.dart文件生效），并排除进程中断、防火墙拦截或插件过旧等问题。
Hot Reload 为什么改了代码没反应？
根本原因不是 VSCode 设置错了，而是热重载能力压根不归它管——Vite 或 Vue CLI 启动的开发服务器才真正负责 HMR。VSCode 只是编辑器，插件（比如 Volar）只影响语法识别和跳转，不控制刷新逻辑。
常见失效现象背后的真实原因：
- 修改
main.ts、router/index.ts或 Pinia store 初始化代码 → 触发整页刷新（Full Reload），不是 HMR 失效，是设计如此 - 在
setup()里改响应式变量没问题，但删掉export default对象里的components字段 → HMR 无法追踪模块边界，控制台可能显示[vite] hot updated: /src/App.vue却无视觉变化 - 用了非标准导出，比如
export const MyComponent = defineComponent(...)而非export default→Volar难以准确定位组件，HMR 行为不稳定 - 项目路径含中文或空格 → Vite 的文件监听器可能漏掉变更，尤其在 macOS 或某些 Linux 文件系统上
端口被占用：查、杀、换三步到位
EADDRINUSE 错误本质是另一个进程正绑着你要用的端口（比如 3000、5173、8080）。别急着关 VSCode，先定位真凶。
查占用：
立即学习“前端免费学习笔记（深入）”；
- Linux/macOS：
lsof -ni :3000（加-n避免 DNS 解析卡顿） - Windows：
netstat -ano | findstr :3000，然后去任务管理器“详细信息”页找对应 PID
杀进程：
- Linux/macOS：
kill -9 12345（把12345换成实际 PID）；若提示Operation not permitted，加sudo - Windows：
taskkill /f /pid 12345；务必以管理员权限运行命令提示符
换端口（一劳永逸）：
- 在
vite.config.ts中改server.port，比如port: 3001 - 如果用
launch.json调试，确保"port": 3001明确指定 - 某些框架 CLI（如
create-react-app）需终端启动时加参数：npm start -- --port 3001
注意：改了端口还报错？可能是前一个进程监听 ::1:3000（IPv6），新进程试图绑 127.0.0.1:3000（IPv4），系统仍视为端口冲突。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
Volar 和插件冲突怎么破？
Vetur 已废弃，和 Volar 共存必然出问题：模板高亮错乱、跳转失效、甚至 HMR 日志都不打印。必须彻底禁用 Vetur。
其他高频冲突点：
- 多个语言服务器争抢：比如同时启用
TypeScript Vue Plugin (Volar)和旧版Vue Language Features→ 光标跳转到错误位置 - 格式化打架：
Prettier和ESLint都设为onSave→ 保存一次触发两次格式化，可能互相覆盖 - 右键菜单重复：两个插件注册了相同
editor/contextID → 菜单项堆叠或消失
快速诊断法：
- 按
Ctrl+Shift+P输入Developer: Toggle Developer Tools，看控制台是否有红色报错，尤其是ExtensionHost相关 - 输入
Developer: Show Running Extensions，观察哪些插件加载耗时 >1s - 终端运行
code --disable-extensions，确认问题消失后再逐个启用排查
Flutter/Dart 自动热重载没反应？先看状态栏
VSCode 不自动触发热重载，它只是把保存事件转发给正在运行的 flutter run 进程。所以第一步永远是确认环境状态是否就绪。
必须满足这三点：
- VSCode 是在 Flutter 项目根目录打开的（含
pubspec.yaml和lib/main.dart） - 终端已执行
flutter run，App 已在设备/模拟器中运行（不是刚启动卡在白屏） - 状态栏右下角显示
Flutter+ 设备名（如iPhone 15），而不是Dart或No device
开启自动热重载：
- 设置里搜
dart.hotReloadOnSave，勾选它（默认是false） - 注意：该设置仅对
.dart文件生效；改pubspec.yaml或图片资源不会触发
仍不工作？检查：
- 杀毒软件或防火墙是否拦截了 VSCode 与
flutter daemon的本地 WebSocket 通信（通常是127.0.0.1:xxxx） - Dart 插件是否为最新版（v3.80.0 之后修复了热重载事件丢失 bug）
- 你改的是构造函数或新增字段？这类变更不支持
hot reload，得按Ctrl+Shift+F5热重启
最常被忽略的一点：热重载依赖 flutter run 进程持续活跃。如果终端里这个进程退出了（比如你按了 Ctrl+C），保存再多次也没用——得先重新 flutter run。
