如何在VSCode中配置Dart和Flutter保存代码时自动执行热重载(Hot Reload)

轻芳大大_9554

轻芳大大_9554

2026-03-26

427人浏览

原创

flutter保存自动热重载失效需先确认flutter run活跃、dart插件识别项目且状态栏显示flutter设备;开启vscode设置dart.hotreloadonsave(仅对.dart文件生效);排除进程中断、防火墙拦截或插件过旧问题;注意热重载不支持构造函数修改等场景,此时需手动热重启。

如何在vscode中配置dart和flutter保存代码时自动执行热重载(hot reload)

Flutter保存时自动热重载没反应?先确认是否启用了热重载支持

VSCode本身不直接触发热重载,它依赖 flutter run 进程处于活跃监听状态,并且 Dart 插件需正确识别当前是 Flutter 项目。常见错误现象是:按 Ctrl+S 后控制台无任何输出,Hot reload 字样不出现。

  • 确保你是在一个合法的 Flutter 项目根目录下打开 VSCode(即包含 pubspec.yaml 且有 lib/main.dart)
  • 终端中已执行过 flutter run(或点击 VSCode 左上角 ▶️ 运行按钮),设备/模拟器已连接并成功启动 App —— 自动热重载只在 flutter run 活跃会话中生效
  • 检查状态栏右下角是否显示 Flutter(而非 Dart)和设备名;若显示 No device 或 Not in a Flutter project,自动热重载必然失败

如何开启保存即热重载:改的是 VSCode 设置,不是 Flutter 配置

这个功能由 Dart 插件提供,开关在 VSCode 的用户设置里,不是 flutter.yaml 或 settings.gradle。关键配置项是 dart.hotReloadOnSave,它控制保存文件时是否向正在运行的 flutter run 进程发送热重载指令。

  • 打开 VSCode 设置(Ctrl+,),搜索 dart.hotReloadOnSave
  • 勾选该选项;它默认为 false,即使装了最新版 Dart 插件也不会自动开启
  • 注意:该设置仅对 .dart 文件生效;修改 pubspec.yaml 或资源文件(如图片、字体)不会触发热重载,必须手动按 R 或点击状态栏图标
  • 如果你用的是多根工作区,确保 Dart 插件在对应 Flutter 文件夹内被激活(状态栏显示 Flutter 图标)

为什么改了设置还是不热重载?检查这三个干扰点

即使 dart.hotReloadOnSave 开启,仍可能因环境状态中断热重载链路。最常被忽略的是进程生命周期和插件权限问题。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • flutter run 进程意外退出(比如 App 崩溃、adb 断连、模拟器关闭)后,VSCode 不会自动重启它 —— 此时保存毫无反应,需手动重新运行
  • 某些杀毒软件或防火墙会拦截 VSCode 与本地 flutter daemon 的 WebSocket 通信(端口通常为 127.0.0.1:xxxx),表现为“保存后卡住几秒,然后无响应”
  • Dart 插件版本太旧(v3.80.0 之前)存在热重载事件丢失 bug;升级到最新版(检查插件页更新时间是否为近 30 天内)可解决

热重载 vs 热重启:别把 hotReloadOnSave 当万能键

这个设置只触发 hot reload,不是 hot restart。两者行为差异极大,直接影响你是否看到预期效果。

  • hot reload 会保留 App 当前状态(如页面栈、变量值、计时器),只替换修改的类定义;但无法处理:新增/删除字段、修改构造函数、改动 main() 或顶层变量初始化逻辑
  • 遇到上述变更,保存后热重载会失败并报错 Performing hot reload... / Reloaded x of y libraries 后无变化,或直接提示 Could not reload changes —— 这时必须手动按 Shift+R 或点击状态栏重载图标执行热重启
  • 如果频繁需要热重启,说明代码结构正偏离热重载友好模式(比如大量逻辑写在 build() 外、过度依赖全局 mutable state)

热重载不是实时编译魔法,它依赖 Flutter 引擎对增量变更的识别能力。保存即重载只是省了一次按键,但理解什么能热、什么必须重启,比配置开关重要得多。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.18

5467

5

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2023.08.10

2388

6

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1315

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2772

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1929

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1727

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2607

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1818

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1242

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程