最近在用 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. 瀏覽器瞬間白屏並完成刷新，新內容立刻出現。