目錄
description bug_report

在 VS Code 裡開發 Flutter 應用

目錄

安裝和設定

根據 編輯工具設定 的指引來安裝 Dart 和 Flutter 擴充套件（也叫做外掛）。

更新擴充套件程式

擴充套件的更新會定期發布。預設情況下，當有可用的更新時 VS Code 會自動更新擴充套件。

手動安裝更新：

  1. 點選側邊欄的 Extensions 按鈕。

  2. 如果 Flutter 擴充套件顯示有可用更新，點選更新按鈕，然後過載。

  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. 選擇 專案地址。

  8. 輸入你想要的 專案名。

從現有原始碼開啟專案

To open an existing Flutter project:

  1. Go to File > Open.

    You can also press Ctrl / Cmd + O

  2. Browse to the directory holding your existing Flutter source code files.
  3. Click Open.

編寫程式碼及檢視問題

Flutter 擴充套件執行程式碼分析，它提供：

  • 語法高亮。

  • 基於豐富輸入分析的程式碼補全。

  • 導向到型別宣告（Go to Definition 或 F12）

    • 前往 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 版本和裝置名稱（或者無裝置訊息）：

VS Code status bar

Flutter 擴充套件會自動選擇上次連線的裝置。然而，如果你有多個裝置/模擬器連線，點選狀態欄的 device 檢視螢幕頂部的選擇清單。選擇你要用來執行或除錯的裝置。

無斷點執行

在 IDE 主視窗點選 Run > Start Without Debugging。

或者按 Ctrl + F5。

斷點執行

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

  2. 在 IDE 主視窗點選 Run > Start Debugging 或按 F5。 Debug console

    • 左側的除錯側邊欄顯示堆疊幀和變數。

    • 底部的除錯控制台面板顯示輸出的日誌詳情。

    • 除錯基於預設的設定。也可以透過點選除錯側邊欄頂部的齒輪建立 launch.json 檔案自定義除錯。你可以修改裡面的值。

以除錯 (debug)、效能 (profile) 或發布 (release) 模式執行應用

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 檔案應該類似下面這樣：

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

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

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

Flutter 為開發者提供了一流的開發體驗，透過 有狀態的熱過載 屬性使你在幾乎修改程式碼的同時就能看到變化。詳情請看 使用熱過載。

進階除錯

以下的除錯指南可能會對你有幫助：

視覺化佈局問題除錯

在除錯會話期間，指令面板 和 Flutter inspector 會新增一些額外的除錯指令，包括：

切換 Baseline 繪製 Baseline painting icon

每個 RenderBox 在底部繪製一條線。

切換重繪 Rainbow Repaint rainbow icon

重新繪製時在圖層上改變顏色。

切換慢模式橫幅 Slow animations icon
減慢動畫以啟用視覺檢查。
切換 debug 模式橫幅顯示 Debug mode banner icon

在執行除錯建立時隱藏 debug 模式的橫幅 (banner)。

除錯外部庫

預設情況下，Flutter 擴充套件禁止除錯外部庫。啟用步驟：

  1. 選擇 Settings > Extensions > Dart Configuration

  2. 勾選 Debug External Libraries 選項。

Flutter 程式碼編輯提示

如果你有其他我們應該提供的程式碼提示建議，請 告訴我們！

程式碼輔助和快速修復

程式碼輔助功能是特定程式碼識別符號相關的程式碼修改。當游標放在 Flutter widget 上時，黃色燈泡圖示會指示可用的修改，可以透過點選燈泡進行修改，或者使用快捷鍵 Ctrl+. (macOS 用 Cmd+.)，如圖所示：

Code assists

You can also press Ctrl / Cmd + .

快速修復跟輔助類別似，當一段程式碼有錯誤並且可以輔助修正時才會顯示。

Widget 巢狀輔助

當你有個 widget 想包裝進一個容器 widget 時，例如你想把 widget 放入一個 Row 或者 Column。

Widget 清單巢狀輔助

和上面的輔助類別似，但它巢狀的是一個 widget 的清單，而不是單個的 widget。

child 和 children 轉換輔助

將 child 轉換成 children，並且把引數值寫進一個 list。

StatelessWidget 到 StatefulWidget 的轉換
建立 State 類並將程式碼移動過去，可以將 StatelessWidget 的實現更改為 StatefulWidget。

程式碼片段

程式碼片段可以用來加速輸入通用類型程式碼段落。透過輸入字首來呼叫，然後從程式碼完成視窗中選擇：

Snippets

Flutter 擴充套件包括以下片段：

  • 字首 stless：建立一個 StatelessWidget 子類別。

  • 字首 stful：建立一個 StatefulWidget 子類別，並且和 State 子類別關聯。

  • 字首 stanim：建立一個 StatefulWidget 子類別，並且把包含欄位初始化的 State 子類別和一個 AnimationController 關聯。

你也可以透過在 指令面板 執行 Configure User Snippets 來自定義片段。

鍵盤快捷鍵


除錯期間，在 除錯工具欄 點選 熱過載 (Hot Reload) 按鈕。

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

鍵位繫結可以在 指令面板 中使用 Open Keyboard Shortcuts 指令進行調整。

熱過載和熱重啟

熱過載的工作原理是將更新後的程式碼注入 Dart VM（虛擬機）。不僅包括新增新類，還包括新增方法和欄位到已有的類別中。但有些型別的程式碼是無法被熱過載的：

  • 全部變數的初始化

  • 靜態變數的初始化

  • 應用的 main() 方法

對於這些更改，你無需結束除錯過程而直接熱重啟 (hot restart) 你的應用。要執行熱重啟，執行 指令面板 的 Flutter：Hot Restart 指令，

你也可以按下 Ctrl + Shift + F5 （在 macOS 上使用 Cmd + Shift + F5）。

故障排除

已知問題和反饋

所有已知 bug 在這個 issue 清單中記錄： Dart 和 Flutter 擴充套件 GitHub issue 追蹤。我們非常歡迎 bugs/issues 和屬性請求的反饋。

在送出新 issue 之前：

  • 在 issue 清單中查詢看該問題是否已被記錄。

  • 確保你已經 更新 最新版本外掛。

送出新 issue 時，請包含 flutter doctor 輸出。