Visual Studio Code

如何在 Visual Studio Code 中開發 Flutter 應用。

VS Code 是一個用於構建和除錯應用的編輯器。安裝 Flutter 擴充套件後，您可以編譯、部署和除錯 Flutter 應用。

要安裝最新版本的 VS Code，請按照 Microsoft 針對相關平臺的說明進行操作

啟動 VS Code。
開啟瀏覽器，前往 Visual Studio Marketplace 上的 Flutter 擴充套件頁面。
點選 Install（安裝）。安裝 Flutter 擴充套件的同時也會安裝 Dart 擴充套件。

前往 View（檢視） > Command Palette...（命令面板...）。
你也可以按 Ctrl / Cmd + Shift + P。
輸入 doctor。
選擇 Flutter: Run Flutter Doctor。
選擇此命令後，VS Code 將執行以下操作
- 開啟 Output（輸出）面板。
- 在面板右上角的下拉選單中顯示 flutter (flutter)。
- 顯示 flutter doctor 命令的輸出結果。

擴充套件更新會定期釋出。預設情況下，VS Code 會在有更新可用時自動更新擴充套件。

若要手動安裝更新

點選側邊欄中的 Extensions（擴充套件）。
如果 Flutter 擴充套件有可用更新，請點選 Update（更新），然後點選 Reload（重新載入）。
重新啟動 VS Code。

建立新專案有幾種方法。

要從 Flutter 入門應用模板建立新專案

前往 View（檢視） > Command Palette...（命令面板...）。
你也可以按 Ctrl / Cmd + Shift + P。
輸入 flutter。
選擇 Flutter: New Project。
按下 Enter 鍵。
選擇 Application（應用）。
按下 Enter 鍵。
選擇 Project location（專案位置）。
輸入您想要的 Project name（專案名稱）。

要開啟現有的 Flutter 專案

前往 File（檔案） > Open（開啟）。
您也可以按下 Ctrl / Cmd + O
瀏覽到包含現有 Flutter 原始碼檔案的目錄。
點選 Open。

Flutter 擴充套件會執行程式碼分析。程式碼分析可以

高亮顯示語言語法
基於豐富的型別分析進行程式碼補全
導航到型別宣告
- 前往 Go（轉到） > Go to Definition（轉到定義）。
- 您也可以按下 F12。
查詢型別用法。
- 按下 Shift + F12。
檢視當前所有原始碼問題。
- 前往 View（檢視） > Problems（問題）。
- 您也可以按下 Ctrl / Cmd + Shift + M。
- “問題”面板會顯示任何分析出的問題

點選主 IDE 視窗中的 Run > Start Debugging（執行 > 開始除錯）開始除錯，或者按下 F5。

當在 VS Code 中開啟 Flutter 專案時，您應該會在狀態列中看到一系列 Flutter 特有的條目，包括 Flutter SDK 版本和裝置名稱（或顯示 No Devices/無裝置）。
VS Code status bar

Flutter 擴充套件會自動選擇最後連線的裝置。但是，如果您連線了多個裝置/模擬器，請點選狀態列中的 device（裝置）以在螢幕頂部檢視選擇列表。選擇您想要用於執行或除錯的裝置。

前往 Run（執行） > Start Without Debugging（不帶除錯執行）。

您也可以按下 Ctrl + F5。

如果需要，在原始碼中設定斷點。
點選 Run（執行） > Start Debugging（開始除錯）。您也可以按下 F5。狀態列將變為橙色，表示您處於除錯會話中。
- 左側的 Debug Sidebar（除錯側邊欄）顯示堆疊幀和變數。
- 底部的 Debug Console（除錯控制檯）面板顯示詳細的日誌輸出。
- 除錯基於預設的啟動配置。若要自定義，請點選 Debug Sidebar（除錯側邊欄）頂部的齒輪圖示以建立 launch.json 檔案。然後您可以修改其中的值。

Flutter 提供了多種構建模式來執行您的應用。您可以在 Flutter 的構建模式中閱讀更多相關資訊。

在 VS Code 中開啟 launch.json 檔案。
如果您沒有 launch.json 檔案
1. 前往 View（檢視） > Run（執行）。
  您也可以按下 Ctrl / Cmd + Shift + D
  顯示 Run and Debug（執行和除錯）面板。
2. 點選 create a launch.json file（建立 launch.json 檔案）。
在 configurations 部分中，將 flutterMode 屬性更改為您想要的目標構建模式。
例如，如果您想在除錯模式下執行，您的 launch.json 可能如下所示
json
```
"configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "debug"
  }
]
```
透過 Run（執行）面板執行應用。

Flutter 提供了一流的開發者迴圈，使您可以透過有狀態熱過載 (Stateful Hot Reload) 功能幾乎瞬間看到更改的效果。要了解更多資訊，請檢視熱過載。

您可能會發現以下高階除錯技巧很有用

在除錯會話期間，多個額外的除錯命令會被新增到命令面板和 Flutter Inspector 中。當空間有限時，圖示將作為標籤的視覺版本。

Toggle Baseline Painting（切換基線繪製）: 使每個 RenderBox 在其每個基線處繪製一條線。
Toggle Repaint Rainbow（切換重繪彩虹顯示）: 重繪時在圖層上顯示旋轉的顏色。
Toggle Slow Animations（切換慢動作動畫）: 減慢動畫速度以進行視覺檢查。
Toggle Debug Mode Banner（切換除錯模式橫幅）: 即使在執行除錯構建時也隱藏除錯模式橫幅。

預設情況下，在 Flutter 擴充套件中除錯外部庫是被停用的。若要啟用

選擇 Settings > Extensions > Dart Configuration（設定 > 擴充套件 > Dart 配置）。
勾選 Debug External Libraries（除錯外部庫）選項。

如果您有其他我們應該分享的技巧，請告訴我們！

輔助功能（Assists）是與特定程式碼識別符號相關的程式碼更改。當游標位於 Flutter Widget 識別符號上時，會出現一個黃色燈泡圖示，表示有許多此類輔助功能可用。要呼叫輔助功能，請點選如下截圖所示的燈泡

Code assists

您也可以按下 Ctrl / Cmd + .

快速修復（Quick fixes）類似，只是它們在一段程式碼有錯誤時顯示，並且可以協助進行更正。

使用新 Widget 包裹 (Wrap with new widget assist): 當您有一個想要用外部 Widget 包裹的 Widget 時可以使用此功能，例如如果您想將一個 Widget 包裹在 Row 或 Column 中。
使用新 Widget 包裹 Widget 列表 (Wrap widget list with new widget assist): 類似於上面的輔助功能，但用於包裹現有的 Widget 列表，而不是單個 Widget。
將 child 轉換為 children (Convert child to children assist): 將 child 引數更改為 children 引數，並將引數值包裹在列表中。
將 StatelessWidget 轉換為 StatefulWidget (Convert StatelessWidget to StatefulWidget assist): 透過建立 State 類並將程式碼移動到其中，將 StatelessWidget 的實現更改為 StatefulWidget。

程式碼片段 (Snippets) 可用於加快輸入典型程式碼結構的速度。它們透過輸入其字首並從程式碼補全視窗中選擇來呼叫：

Flutter 擴充套件包含以下程式碼片段

字首 stless：建立一個 StatelessWidget 的新子類。
字首 stful：建立一個 StatefulWidget 的新子類及其關聯的 State 子類。
字首 stanim：建立一個 StatefulWidget 的新子類，及其關聯的 State 子類（包括一個用 AnimationController 初始化的欄位）。

Dart 擴充套件包含以下程式碼片段

字首	描述	程式碼示例
`main`	插入一個用作入口點的 main 函式。	`void main(List<String> args) { }`
`try`	插入一個 try/catch 塊。	`try { } catch (e) { }`
`if`	插入一個 if 語句。	`if (condition) { }`
`ife`	插入一個帶有 else 塊的 if 語句。	`if (condition) { } else { }`
`switch`	插入一個 switch 語句。	`switch (variable) { case value1: break; case value2: break; default: }`
`for`	插入一個 for 迴圈。	`for (var i = 0; i < 10; i++) { }`
`fori`	插入一個 for-in 迴圈。	`for (var item in list) { }`
`while`	插入一個 while 迴圈。	`while (condition) { }`
`do`	插入一個 do-while 迴圈。	`do { } while (condition);`
`fun`	插入一個函式定義。	`void myFunction(String name) { }`
`class`	插入一個類定義。	`class MyClass { }`
`typedef`	插入一個 typedef。	`typedef MyFunction = void Function(String);`
`test`	插入一個測試塊。	`test('My test description', () { });`
`group`	插入一個測試組塊。	`group('My test group', () { });`

您還可以透過執行命令面板中的 Configure User Snippets（配置使用者程式碼片段）來定義自定義程式碼片段。

熱過載

要在除錯會話期間執行熱過載，請點選 Debug Toolbar（除錯工具欄）上的 Hot Reload（熱過載）。

您也可以按下 Ctrl + F5（macOS 上為 Cmd + F5）。

可以透過執行命令面板中的 Open Keyboard Shortcuts（開啟鍵盤快捷方式）命令來更改鍵盤對映。

熱過載的工作原理是將更新的原始碼檔案注入到正在執行的 Dart VM（虛擬機器）中。這不僅包括新增新類，還包括向現有類新增方法和欄位，以及更改現有函式。不過，有幾種型別的程式碼更改無法進行熱過載

全域性變數初始化器
靜態欄位初始化器
應用的 main() 方法

對於這些更改，請在不結束除錯會話的情況下重新啟動應用。要執行熱重啟，請從命令面板執行 Flutter: Hot Restart（Flutter：熱重啟）命令。

您也可以按下 Ctrl + Shift + F5 或 macOS 上的 Cmd + Shift + F5。

Flutter 屬性編輯器是由 Flutter 擴充套件提供的強大工具，讓您可以直接從其視覺介面檢視和修改 Widget 屬性。

點選 VS Code 側邊欄中的 Flutter Property Editor（屬性編輯器）圖示。
Flutter 屬性編輯器將在側面板中載入。
請參閱 Flutter 屬性編輯器文件以獲取詳細的使用指南。

Flutter Property Editor side panel in VS Code

所有已知 Bug 都在問題跟蹤器中進行追蹤：Dart 和 Flutter 擴充套件 GitHub 問題跟蹤器。我們歡迎關於 Bug/問題以及功能請求的反饋。

在提交新問題之前

在問題跟蹤器中進行快速搜尋，檢視該問題是否已被跟蹤。
確保您更新到了外掛的最新版本。

提交新問題時，請附上 flutter doctor 的輸出。

此頁面內容有幫助嗎？

除非另有說明，本網站上的文件反映的是 Flutter 3.41.5 版本。頁面最後更新於 2026-05-05。檢視原始碼或報告問題。

Visual Studio Code

安裝與設定

安裝 Flutter 擴充套件

驗證 VS Code 設定

更新擴充套件

建立專案

建立新專案

從現有原始碼開啟專案

編輯程式碼並檢視問題

執行與除錯

選擇目標裝置

不帶斷點執行應用

帶斷點執行應用

以除錯、效能分析或釋出模式執行應用

快速編輯與重新整理開發週期

高階除錯

除錯視覺佈局問題

除錯外部庫

Flutter 程式碼編輯技巧

輔助功能與快速修復

程式碼片段 (Snippets)

鍵盤快捷鍵

熱過載與熱重啟

Flutter 屬性編輯器

如何在 VS Code 中開啟 Flutter 屬性編輯器

故障排除

已知問題與反饋