跳到主內容

安裝與設定

#

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

要安裝最新版本的 VS Code，請遵循 Microsoft 針對相應平臺的說明。

安裝 Flutter 擴充套件

#

  1. 啟動 VS Code。

  2. 開啟瀏覽器並訪問 Visual Studio Marketplace 上的 Flutter 擴充套件頁面。

  3. 點選 Install。安裝 Flutter 擴充套件也會同時安裝 Dart 擴充套件。

驗證您的 VS Code 設定

#

  1. 轉到 View > Command Palette...。

    你也可以按 Ctrl / Cmd + Shift + P。

  2. 輸入 doctor。

  3. 選擇 Flutter: Run Flutter Doctor。

    選擇此命令後，VS Code 會執行以下操作：

    • 開啟 Output 面板。
    • 在此面板右上角的下拉列表中顯示 flutter (flutter)。
    • 顯示 flutter doctor 命令的輸出。

更新擴充套件

#

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

自行安裝更新

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

建立專案

#

建立新專案有幾種方法。

建立新專案

#

從 Flutter 啟動應用模板建立新的 Flutter 專案

  1. 轉到 View > Command Palette...。

    你也可以按 Ctrl / Cmd + Shift + P。

  2. 輸入 flutter。

  3. 選擇 Flutter: New Project。

  4. 按 Enter。

  5. 選擇 Application。

  6. 按 Enter。

  7. 選擇一個 Project location。

  8. 輸入您想要的 Project name。

從現有原始碼開啟專案

#

開啟現有 Flutter 專案

  1. 轉到 File > Open。

    您也可以按 Ctrl / Cmd + O

  2. 瀏覽到包含現有 Flutter 原始碼檔案的目錄。

  3. 點選 Open。

編輯程式碼和檢視問題

#

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

  • 高亮語法

  • 基於豐富的型別分析完成程式碼

  • 導航到型別宣告

    • 轉到 Go > Go to Definition。
    • 您也可以按 F12。

  • 查詢型別用法。

    • 按 Shift + F12。

  • 檢視所有當前原始碼問題。

    • 轉到 View > Problems。
    • 您也可以按 Ctrl / Cmd + Shift + M。
    • Problems 面板會顯示任何分析問題。
      Problems pane

執行和除錯

#

透過點選主 IDE 視窗中的 Run > Start Debugging 來開始除錯，或按 F5。

選擇目標裝置

#

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

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

無斷點執行應用

#

轉到 Run > Start Without Debugging。

您也可以按 Ctrl + F5。

設定斷點執行應用

#

  1. 如果需要，請在原始碼中設定斷點。

  2. 點選 Run > Start Debugging。您也可以按 F5。狀態列會變成橙色，表示您正在進行除錯會話。
    Debug console

    • 左側的 Debug Sidebar 顯示堆疊幀和變數。
    • 底部的 Debug Console 面板顯示詳細的日誌輸出。
    • 除錯基於預設的啟動配置。要自定義，請點選 Debug Sidebar 頂部的齒輪圖示，以建立 launch.json 檔案。然後您可以修改這些值。

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

#

Flutter 提供了多種不同的構建模式來執行您的應用。您可以在 Flutter 的構建模式 中瞭解更多。

  1. 在 VS Code 中開啟 launch.json 檔案。

    如果您沒有 launch.json 檔案

    1. 轉到 View > Run。

      您也可以按 Ctrl / Cmd + Shift + D

      顯示 Run and Debug 面板。

    2. 點選 create a launch.json file。

  2. 在 configurations 部分，將 flutterMode 屬性更改為您要定位的構建模式。

    例如，如果您想在除錯模式下執行，您的 launch.json 可能如下所示：

    json
    "configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "debug"
  }
]

  3. 透過 Run 面板執行應用。

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

#

Flutter 提供了業界領先的開發者週期，透過狀態熱過載功能，您可以幾乎即時看到程式碼更改的效果。要了解更多資訊，請檢視 熱過載。

高階除錯

#

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

除錯視覺佈局問題

#

在除錯會話期間，命令面板 Command Palette 和 Flutter 檢查器 Flutter inspector 中會新增幾個額外的除錯命令。當空間有限時，圖示會作為標籤的視覺版本使用。

Toggle Baseline Painting Baseline painting icon
使每個 RenderBox 在其每個基線上繪製一條線。
Toggle Repaint Rainbow Repaint rainbow icon
在重繪時顯示圖層上的旋轉顏色。
Toggle Slow Animations Slow animations icon
減慢動畫速度以進行視覺檢查。
Toggle Debug Mode Banner Debug mode banner icon
即使在執行除錯構建時，也會隱藏除錯模式橫幅。

除錯外部庫

#

預設情況下，Flutter 擴充套件中停用除錯外部庫。要啟用它：

  1. 選擇 Settings > Extensions > Dart Configuration。
  2. 選中 Debug External Libraries 選項。

Flutter 程式碼編輯技巧

#

如果您有其他建議要分享，請 告訴我們！

輔助功能和快速修復

#

輔助功能是與特定程式碼識別符號相關的程式碼更改。當游標放在 Flutter widget 識別符號上時，會提供許多此類輔助功能，由黃色燈泡圖示指示。要呼叫輔助功能，請點選燈泡，如下圖所示：

Code assists

您也可以按 Ctrl / Cmd + .

快速修復類似，只是它們會在一段程式碼有錯誤時顯示，並且可以幫助糾正它。

使用新 widget 包裹 assist
當您有一個 widget 需要被包含在另一個 widget 中時，可以使用此功能，例如，如果您想將一個 widget 包裹在 Row 或 Column 中。
使用新 widget 包裹 widget 列表 assist
與上面的 assist 類似，但用於包裹現有 widget 列表而不是單個 widget。
將 child 轉換為 children assist
將 child 引數更改為 children 引數，並將引數值包裝在列表中。
將 StatelessWidget 轉換為 StatefulWidget assist
透過建立 State 類並將其中的程式碼移至其中，將 StatelessWidget 的實現更改為 StatefulWidget 的實現。

程式碼片段

#

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

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

  • 字首 stless：建立 StatelessWidget 的新子類。
  • 字首 stful：建立 StatefulWidget 及其關聯的 State 子類的新子類。
  • 字首 stanim：建立 StatefulWidget 及其關聯的 State 子類的新子類，其中包含一個使用 AnimationController initialised 的欄位。

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', () { });

您也可以透過從命令面板 Command Palette 執行 Configure User Snippets 來定義自定義程式碼片段。

鍵盤快捷鍵

#
熱過載

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

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

可以透過從命令面板 Command Palette 執行 Open Keyboard Shortcuts 命令來更改鍵盤對映。

熱過載與熱重啟

#

熱過載的工作原理是將更新後的原始檔注入到正在執行的 Dart VM (Virtual Machine) 中。這不僅包括新增新類，還包括向現有類新增方法和欄位，以及更改現有函式。然而，有幾種程式碼更改無法進行熱過載：

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

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

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

Flutter 屬性編輯器

#

Flutter 屬性編輯器是 Flutter 擴充套件提供的強大工具，它允許您直接從其視覺化介面檢視和修改 widget 屬性。

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

#
  1. 點選 VS Code 側邊欄中的 Flutter 屬性編輯器 圖示 Flutter Property Editor VS Code icon。
  2. Flutter 屬性編輯器將在側邊面板中載入。
  3. 有關詳細的使用指南，請參閱 Flutter 屬性編輯器 文件。

Flutter Property Editor side panel in VS Code

故障排除

#

已知問題和反饋

#

所有已知 bug 都在問題跟蹤器中跟蹤：Dart 和 Flutter 擴充套件 GitHub 問題跟蹤器。我們歡迎反饋，包括 bug/問題和功能請求。

在提交新問題之前：

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

提交新問題時，請包含 flutter doctor 的輸出。

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新時間：2025-09-05。 檢視原始碼 或 報告問題。