使用 VS Code 上手體驗 Flutter
- 2019 年 10 月 4 日
- 筆記
Hi，船員們好，我是體驗了 VSCode 的船長。
Flutter 目前支援 Android Studio/Intellij/Visual Studio Code/終端&文本編輯器 四種方式來編寫， AS 我已經非常熟悉了，為了挑戰下自己（no zuo no die），學一下 VS Code，指不定以後寫前端還用得著，所以綜合考慮下我選擇了使用 VS Code 來學習 Flutter 開發。
本文分享使用 VS Code 開發 Flutter 的初體驗。
安裝 Flutter 和 Dart 插件。
- View->Command Palette..
- Install -> install extensions…
- 搜索 Flutter 並安裝
- 重啟 VS
如圖：
運行 flutter doctor:
打開 Command Palette 輸入 doctor , 選擇 Run Flutter Doctor :
我遇到個問題：
這個比較奇怪，我明明配置了環境變數但是還是提示我找不到，看了下 Show Log 發現跟我配置的不太對，東西少了很多，想了想可能是因為我沒有配置VS 的終端，它默認用的是 bash 不是 zsh，所以沒找到我配置在 zsh 的 flutter。
於是我嘗試把 flutter 配置到 bash_profile ，然後發現就行了，我真 TM 是個機智鬼。
vim .bash_profile source .bash_profile
再執行上面的操作，運行的結果跟在終端運行 flutter doctor 是一樣的。
打開最開始創建的 helloflutter 項目，執行 flutter run 就能運行起來啦！
到此 VS 的 Flutter 基本開發環境算是配置好了。
試著修改了下 lib/main.dart 文件，然後在終端輸入 r ，可以看到可以立馬更新到模擬器上，很是快捷。
開發初體驗
創建 App
不用之前創建的工程，用 VS Code 也是可以創建工程的。
在 command palette 輸入 flutter , 找到 New Project 並執行，輸入工程名後會自動創建工程。
這裡工程名我輸入了 fluttervscode ，自動生成的項目：
然後切換到終端，執行 flutter run ，就能跑起項目來啦！（我開著 iOS 模擬器）
在 VS 右下角有個狀態欄，展示了一些基本資訊，也可以切換設備。
如圖：
調試模式
菜單欄 Debug -> Start Debugging 可開啟 Debug，初次使用會讓你激活一些插件，開啟即可。
當一切就緒，可以通過底部打開一個Dart DevTools的網頁，展示一些 App 的資訊：
可以看到展示了類似視圖結構等資訊，具體等以後深入了解，這裡就不多寫了。
此外 VSCode 還會出現個 debug 的工具欄，以幫助我們開發測試：
Hot reload
嘗試修改 Demo 里的 Text 組件，command + S 保存, 這修改就能直接表現到模擬器上。（或者點擊那個閃電）
（這裡本來是張 Gif 圖，結果裂了）
總結
這次體驗只是嘗試在 VS Code 上安裝插件，新建 Flutter 項目，以及 Run 其 Hello Flutter 工程，還算是方便快捷，但是還是感覺 Android Studio 更加順手 -0-。
後續如果有機會再多體驗了再來分享，請保持關注。
文檔：https://flutter.cn/docs/get-started/editor?tab=vscode
