Visual Studio Code

VS Code 是一款用於建構與除錯應用程式的程式碼編輯器。安裝 Flutter 擴充功能後，你可以編譯、部署並除錯 Flutter 應用程式。

若要安裝最新版的 VS Code，請依照 Microsoft 提供的相關平台說明進行：

啟動 VS Code。
開啟瀏覽器並前往 Visual Studio Marketplace 上的 Flutter 擴充功能頁面。
點擊 Install。安裝 Flutter 擴充功能時，也會一併安裝 Dart 擴充功能。

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

擴充功能會定期推出更新。預設情況下，VS Code 會在有更新時自動更新擴充功能。

若要自行安裝更新：

點擊側邊欄的 擴充功能。
如果 Flutter 擴充功能有可用的更新，點擊 Update，然後點擊 Reload。
重新啟動 VS Code。

建立新專案有幾種方式。

若要從 Flutter 起始應用程式範本建立新的 Flutter 專案：

前往檢視 > 命令面板...。
你也可以按下 Ctrl / Cmd + Shift + P。
輸入 flutter。
選擇 Flutter: New Project。
按下 Enter。
選擇 Application。
按下 Enter。
選擇 專案位置。
輸入你想要的 專案名稱。

若要開啟現有的 Flutter 專案：

前往檔案 > 開啟。
你也可以按下 Ctrl / Cmd + O
瀏覽至存放你現有 Flutter 原始碼檔案的目錄。
點擊開啟。

Flutter 擴充功能會執行程式碼分析。程式碼分析可以：

高亮語言語法
根據豐富的型別分析自動補全程式碼
導航至型別宣告
- 前往 Go > Go to Definition。
- 你也可以按下 F12。
尋找型別的使用處。
- 按下 Shift + F12。
檢視所有目前原始碼的問題。
- 前往檢視 > Problems。
- 你也可以按下 Ctrl / Cmd + Shift + M。
- 問題面板會顯示所有分析問題：

你可以在主 IDE 視窗中點擊 執行 > 開始除錯，或按下 F5⟧ 來開始除錯。

當你在 VS Code 中開啟 Flutter 專案時，你應該會在狀態列看到一組 Flutter 專屬的項目，包含 Flutter SDK 版本與裝置名稱（或顯示 No Devices 訊息）：
VS Code status bar

Flutter 擴充功能會自動選擇最後連接的裝置。但如果你同時連接了多個裝置或模擬器，請點擊狀態列中的 device，螢幕上方會出現選單。選擇你想用來執行或除錯的裝置。

前往執行 > Start Without Debugging。

你也可以按下 Ctrl + F5。

如有需要，先在原始碼中設定中斷點。
點擊執行 > 開始除錯。你也可以按下 F5。狀態列會變成橘色，表示你正在除錯階段。
- 左側的 Debug Sidebar 會顯示堆疊框架與變數。
- 下方的 Debug Console 面板會顯示詳細的日誌輸出。
- 除錯會根據預設啟動組態進行。若要自訂，請點擊 Debug Sidebar 頂端的齒輪圖示以建立 launch.json 檔案，然後你可以修改相關設定值。

Flutter 提供多種不同的建置模式來執行你的應用程式。你可以在 Flutter 的建置模式了解更多。

在 VS Code 中開啟 launch.json 檔案。
如果你還沒有 launch.json 檔案：
1. 前往檢視 > 執行。
  你也可以按下 Ctrl / Cmd + Shift + D
  這時會顯示 執行與除錯 面板。
2. 點擊 建立 launch.json 檔案。
在 configurations 區段中，將 flutterMode 屬性更改為你想要目標的建置模式。
例如，如果你想以 debug 模式執行，你的 launch.json 可能如下所示：
json
```
"configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "debug"
  }
]
```
透過 Run 面板執行應用程式。

Flutter 提供業界領先的開發循環，透過 Stateful Hot Reload（狀態熱重載）功能，讓你幾乎能即時看到程式碼變更的效果。想了解更多，請參閱 Hot reload。

你可能會覺得以下進階除錯技巧很有幫助：

在除錯階段，Command Palette 及 Flutter inspector 會新增多項除錯指令。當空間有限時，會以圖示方式顯示標籤。

切換基線繪製 ：讓每個 RenderBox 在其每個基線處繪製一條線。

切換重繪彩虹 ：在重繪時於圖層上顯示旋轉顏色。

切換慢速動畫 ：將動畫速度放慢，方便進行視覺檢查。

切換除錯模式橫幅 ：即使在除錯建置時，也可隱藏除錯模式橫幅。

預設情況下，Flutter 擴充功能不會啟用外部函式庫的除錯。若要啟用：

選擇 Settings > Extensions > Dart Configuration。
勾選 Debug External Libraries 選項。

如果你有其他值得分享的小技巧，歡迎告訴我們！

協助工具（Assists）是與特定程式碼識別子相關的程式碼變更。當游標放在 Flutter 元件（Widget）識別子上時，會顯示多種協助工具，並以黃色燈泡圖示標示。要啟用協助工具，請點擊如下截圖所示的燈泡：

Code assists

你也可以按下 Ctrl / Cmd + .

快速修正（Quick fixes）與協助工具類似，不過它們會在程式碼出現錯誤時顯示，並協助你修正錯誤。

以新元件包裹協助工具 ：當你想將某個元件包裹在其他元件外層時可使用，例如想將元件包裹在 Row 或 Column 中。

以新元件包裹元件清單協助工具 ：與上述協助工具類似，但適用於包裹現有的元件清單，而非單一元件。

將 child 轉換為 children 協助工具 ：將 child 參數轉換為 children 參數，並將參數值包裝成清單。

將 StatelessWidget 轉換為 StatefulWidget 協助工具 ：將 StatelessWidget 的實作轉換為 StatefulWidget，自動建立 State 類別並將程式碼移至該處。

程式碼片段可加速輸入常見的程式碼結構。只需輸入片段前綴，然後從程式碼自動完成視窗中選擇即可： Snippets

Flutter 擴充功能內建以下程式碼片段：

前綴 stless：建立新的 -StatelessWidget`.
Prefix stful: Create a new subclass of StatefulWidget and its associated State subclass.
Prefix stanim: Create a new subclass of StatefulWidget, and its associated State subclass including a field initialized with an AnimationController.

The Dart extension includes the following snippets:

Prefix	Description	Code Example
`main`	Insert a main function, used as an entry point.	`void main(List<String> args) { }`
`try`	Insert a try/catch block.	`try { } catch (e) { }`
`if`	Insert an if statement.	`if (condition) { }`
`ife`	Insert an if statement with an else block.	`if (condition) { } else { }`
`switch`	Insert a switch statement.	`switch (variable) { case value1: break; case value2: break; default: }`
`for`	Insert a for loop.	`for (var i = 0; i < 10; i++) { }`
`fori`	Insert a for-in loop.	`for (var item in list) { }`
`while`	Insert a while loop.	`while (condition) { }`
`do`	Insert a do-while loop.	`do { } while (condition);`
`fun`	Insert a function definition.	`void myFunction(String name) { }`
`class`	Insert a class definition.	`class MyClass { }`
`typedef`	Insert a typedef.	`typedef MyFunction = void Function(String);`
`test`	Insert a test block.	`test('My test description', () { });`
`group`	Insert a test group block.	`group('My test group', () { });`

You can also define custom snippets by executing Configure User Snippets from the Command Palette.

Hot reload

To perform a hot reload during a debug session, click Hot Reload on the Debug Toolbar.

You can also press Ctrl + F5 (Cmd + F5 on macOS).

Keyboard mappings can be changed by executing the Open Keyboard Shortcuts command from the Command Palette.

Hot reload works by injecting updated source code files into the running Dart VM (Virtual Machine). This includes not only adding new classes, but also adding methods and fields to existing classes, and changing existing functions. A few types of code changes cannot be hot reloaded though:

Global variable initializers
Static field initializers
The main() 方法於應用程式中

進行這些變更時，請重新啟動你的應用程式，但不需結束除錯階段。要執行熱重啟（hot restart），請在 Command Palette 執行 Flutter: Hot Restart 指令。

你也可以按下 Ctrl + Shift + F5 或在 macOS 上按 Cmd + Shift + F5。

Flutter 屬性編輯器是 [Flutter 擴充功能][] 提供的強大工具，讓你可以直接在視覺化介面中檢視並修改元件（Widget）屬性。

點擊 VS Code 側邊欄的 Flutter 屬性編輯器圖示。
Flutter 屬性編輯器將會在側邊面板載入。
詳細使用說明請參閱 Flutter 屬性編輯器文件。

Flutter Property Editor side panel in VS Code

所有已知的錯誤皆記錄於問題追蹤器：Dart and Flutter extensions GitHub issue tracker。我們歡迎各種回饋，包括錯誤/問題回報及功能需求。

在提交新問題前，請先：

在問題追蹤器中快速搜尋，確認該問題是否已被追蹤。
確認你已更新至最新版本的外掛程式。

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

此頁面的內容是否對您有幫助？

感謝您的回饋！

提供詳細內容

感謝您的回饋！請告訴我們可以如何改進。

提供詳細內容

除非另有說明，本網站上的文件反映最新的 Flutter 穩定版。頁面最後更新於 2025-10-26。檢視原始碼或回報問題.

Visual Studio Code

安裝與設定

安裝 Flutter 擴充功能

驗證你的 VS Code 設定

更新擴充功能

建立專案

建立新專案

從現有原始碼開啟專案

編輯程式碼與檢視問題

執行與除錯

選擇目標裝置

不設定中斷點執行應用程式

設定中斷點執行應用程式

以 debug、profile 或 release 模式執行應用程式

快速編輯與即時刷新開發循環

進階除錯

視覺版面配置問題的除錯

除錯外部函式庫

Flutter 程式碼編輯小技巧

協助工具與快速修正

程式碼片段（Snippets）

Keyboard shortcuts

Hot reload vs. hot restart

Flutter 屬性編輯器（Property Editor）

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

疑難排解

已知問題與回饋