Flutter Web 开发避坑指南：VS Code 保存无法自动刷新（Hot Restart）的终极解法

最近在用 VS Code 开发 Flutter Web 项目（Windows 环境），遇到了一个非常影响效率的问题：

每当我修改代码并按下 Ctrl + S 保存时，VS Code 的调试控制台明明显示：

Reloaded application in 263ms.

看起来一切正常，但浏览器里的页面却纹丝不动。我必须手动点击调试栏上的绿色“重启”按钮（Hot Restart），或者按 R 键，浏览器才会刷新并显示修改后的效果。

对于习惯了 Web 开发（Vue/React）“保存即刷新”体验的我来说，这简直不能忍。

原因分析：Hot Reload vs Hot Restart

查阅资料后发现，这是 Flutter Web 目前的一个特性（或者说局限性）：

1. Hot Reload (热重载)：这是 Flutter 在移动端（Android/iOS）的神器，能保留 App 状态（比如输入框的内容）并更新代码。但在 Web 端，由于编译机制不同，热重载对很多修改（比如全局变量、静态布局）是无效的。

2. Hot Restart (热重启)：这才是 Web 端需要的。它会重新编译并刷新整个页面（状态会重置）。

问题所在：VS Code 默认的 Ctrl + S 触发的是 Hot Reload，而 Web 开发往往需要 Hot Restart。

解决方案：自定义“宏”命令

既然官方默认不支持，我们就通过配置 VS Code 的 keybindings.json，把“保存”和“热重启”两个动作绑定到 Ctrl + S 上。

避坑提示：不要修改只读文件！

在配置快捷键时，在命令面板搜索 Keyboard Shortcuts 时，很容易误点进 "Default Keyboard Shortcuts"。

• ❌ Default Keyboard Shortcuts：这是 VS Code 的默认配置，是只读的（Read-only），怎么改都报错。

• ✔ Preferences: Open Keyboard Shortcuts (JSON)：这才是我们需要编辑的用户配置文件。

具体步骤

1. 在 VS Code 中按下 Ctrl + Shift + P 打开命令面板。

2. 输入并选择：Preferences: Open Keyboard Shortcuts (JSON)。

3. 在打开的 JSON 文件中（在 [ 和 ] 之间），粘贴以下配置：

JSON

{
    "key": "ctrl+s",
    "command": "runCommands",
    "args": {
        "commands": [
            "workbench.action.files.save", // 1. 先保存文件
            "flutter.hotRestart"           // 2. 紧接着执行热重启
        ]
    },
    // 关键：限制仅在 Dart 文件中生效，不影响 Vue/React 开发
    "when": "editorTextFocus && editorLangId == 'dart'"
}

完美解决

配置完成后，再次回到 main.dart 修改代码并按下 Ctrl + S：

1. 文件自动保存。

2. 调试控制台显示 Restarted application...。

3. 浏览器瞬间白屏并完成刷新，新内容立刻出现。