本文將與你一起回顧如何在 VS Code 裡進行 Flutter 應用的開發。
1. 安裝和配置
根據 編輯工具設定 的指引來安裝 Dart 和 Flutter 擴展（也叫做插件）。
1.1 更新擴展程序
擴展的更新會定期發佈。默認情況下，當有可用的更新時 VS Code 會自動更新擴展。
手動安裝更新：
（1）點擊側邊欄的擴展按鈕
（2）如果 Flutter 擴展顯示有可用更新，點擊更新按鈕，然後重載。
（3）重啟 VS Code。
2. 創建項目
2.1 新建項目
通過 Flutter 入門應用模板新建 Flutter 項目：
（1）打開命令面板（Ctrl+Shift+P （macOS 用 Cmd+Shift+P））。
（2）選擇
Flutter: New Project 命令然後按 Enter。（3）輸入你想要的項目名。
（4）選擇項目地址。
2.2 從現有源代碼打開項目
打開現有 Flutter 項目：
（1）在 IDE 主窗口點擊 File > Open。
（2）選擇存放現有 Flutter 源代碼文件的目錄。
（3）點擊 Open。
3. 編寫代碼及查看問題
Flutter 擴展執行代碼分析，它提供：
- 語法高亮。
- 基於豐富輸入分析的代碼補全。
- 導航到類型聲明（ Go to Definition 或 F12）和查找類型引用（Find All References 或 Shift+F12）。
- 查看所有當前代碼問題（View > Problems 或 Ctrl+Shift+M (macOS 用 Cmd+Shift+M)）。所有問題分析都會在 Problems 面板展示：
4. 運行和調試
備忘
有多種方式能夠調試你的應用
- 使用 DevTools，它是一個運行在瀏覽器中的調試以及性能測試工具集。DevTools 取代了前一代基於瀏覽器的性能測試工具 Observatory，它包含了以前僅適用於 Android Studio 和 IntelliJ 的功能，例如 Flutter inspector。
- 使用 VS Code 的內置調試功能，例如設置斷點。
以下說明描述了 VS Code 可用的功能。更多使用 DevTools 的詳細信息請參考 DevTools 中的 Running DevTools from VS Code 文檔。
在 IDE 主窗口點擊 Debug > Start Debugging 或按 F5 開啟調試。
4.1 選擇目標設備
當一個 Flutter 項目在 VS Code 中打開，你會在狀態欄看到一些 Flutter 特有項，包括 Flutter SDK 版本和設備名稱（或者無設備信息）。
備忘
- 如果你沒看到 Flutter 版本號或者設備信息，你的項目可能不被識別為一個 Flutter 項目。請確認 VS Code Workspace Folder 的目錄中是否含有 pubspec.yaml。
- 如果狀態欄顯示無設備表明 Flutter 沒有發現任何已連接的 IOS、Android 或者模擬器。你需要連接設備或者啟動模擬器。
Flutter 擴展會自動選擇上次連接的設備。然而，如果你有多個設備/模擬器連接，點擊狀態欄的 device 查看屏幕頂部的選擇列表。選擇你要用來運行或調試的設備。
備忘
如果你嘗試運行 web 應用，但是 Chrome (web) 並不在目標列表中，請檢查是否啟用了 web，在 Building a web application 中進行了介紹。
4.2 無斷點運行
（1）在 IDE 主窗口點擊 Debug > Start Without Debugging，或者按 Ctrl+F5。狀態欄變橙色說明你正處於調試模式。
4.3 斷點運行
（1）如果需要，在源代碼中設置斷點。
（2）在 IDE 主窗口點擊 Debug > Start Debugging 或按 F5。
- 左側的調試側邊欄顯示堆棧幀和變量。底部的調試控制檯面板顯示輸出的日誌詳情。調試基於默認的配置。也可以通過點擊調試側邊欄頂部的齒輪創建 launch.json 文件自定義調試。你可以修改裡面的值。
Flutter 提供一流的開發週期，通過 Stateful Hot Reload 特性使你在幾乎修改代碼的同時就能看到變化。詳情請看 使用熱重載。
6. 進階調試
6.1 可視化佈局問題調試
在調試會話期間，命令面板 和 Flutter inspector 會添加一些額外的調試命令，包括：
- 切換 Baseline 繪製
- 每個 RenderBox 在底部繪製一條線。
- 切換重繪 Rainbow
- 重新繪製時在圖層上改變顏色。
- 切換慢模式橫幅
- 減慢動畫以啟用視覺檢查。
- 切換 debug 模式橫幅顯示
- 在運行調試構建時隱藏 debug 模式的橫幅 (banner)。
6.2 調試外部庫
默認情況下，Flutter 擴展禁止調試外部庫。啟用步驟：
（1）選擇 Settings > Extensions > Dart Configuration
（2）勾選 Debug External Libraries 選項。
如果你有其他我們應該提供的代碼提示建議，請 [告訴我們][]!
7.1 代碼輔助和快速修復
代碼輔助功能是特定代碼標識符相關的代碼修改。當光標放在 Flutter widget 上時，黃色燈泡圖標會指示可用的修改，可以通過點擊燈泡進行修改，或者使用快捷鍵 Ctrl+. (macOS 用 Cmd+.)，如圖所示：
快速修復跟輔助類似，當一段代碼有錯誤並且可以輔助修正時才會顯示。
Widget 嵌套輔助
當你有個 widget 想包裝進一個容器 widget 時，例如你想把 widget 放入一個 Row 或者 Column。
Widget 列表嵌套輔助
和上面的輔助類似，但它嵌套的是一個 widget 的列表，而不是單個的 widget。
child 和 children 轉換輔助
將 child 轉換成 children，並且把參數值寫進一個 list。
7.2 代碼片段
代碼片段可以用來加速輸入通用類型代碼段。通過輸入前綴來調用，然後從代碼完成窗口中選擇：
Flutter 擴展包含以下片段：
- 前綴 stless：創建一個 StatelessWidget 子類。
- 前綴 stful：創建一個 StatefulWidget 子類，並且和 State 子類關聯。
- 前綴 stanim：創建一個 StatefulWidget 子類，並且把包含字段初始化的 State 子類和一個 AnimationController 關聯。
你也可以通過在 命令面板 執行Configure User Snippets來自定義片段。
7.3 鍵盤快捷鍵
熱重載
調試期間，在調試工具欄點擊重啟按鈕，或者按 Ctrl+Shift+F5 (macOS 用 Cmd+Shift+F5)執行熱重載。
鍵盤映射可以在 命令面板 執行Open Keyboard Shortcuts修改。
7.4 熱重載和熱重啟
熱重載的工作原理是將更新後的代碼注入 Dart VM（虛擬機）。不僅包括添加新類，還包括添加方法和字段到已有的類中。但有些類型的代碼是無法被熱重載的：
- 全部變量的初始化
- 靜態變量的初始化
- 應用的 main() 方法
對於這些更改，你無需結束調試過程而直接熱重啟 (hot restart) 你的應用。要執行熱重啟，執行 命令面板 的 Flutter：熱重啟命令，或者按 Ctrl+F5。
8. 故障排除
8.1 已知問題和反饋
所有已知 bug 在這個 issue 列表中記錄：Dart 和 Flutter 擴展 GitHub issue 追蹤。
我們非常歡迎 bugs/issues 和特性請求的反饋。在提交新 issue 之前：
- 在 issue 列表中查找看該問題是否已被記錄。
- 確保你已經更新最新版本插件。
提交新 issue 時，請包含 flutter doctor 輸出。
閱讀更多 技術剛剛好 的文章
