使用VSCode開發Flutter

前言

爲何使用VSCode?

flutter官方推薦的編輯器有IDEA/Android Studio和VSCode, 以前開發Flutter用的IDEA, 不過IDEA始終比較重,因而換用VSCode 發現開發體驗也很是的好。

安裝開發環境

安裝Flutter

尚未安裝flutter的小夥伴能夠先看Flutter Install或者Google，這裏就不貼了。

安裝VSCode

本體

語言包插件

VSCode也是flutter官方推薦的編輯器，小夥伴能夠先看官方使用教程

安裝Flutter插件

搜索並安裝Dart和Flutter插件

驗證配置

• 在終端中運行flutter doctor,查看輸出是否有問題
• 或者在VSCode中打開命令面板 找到Flutter: Run Flutter Doctor執行

VSCode 命令面板(cmd+shift+p)支持搜索因此通常輸入flutter 就能夠方便找到咱們須要的命令

使用VSCode開發

新建Flutter項目

• 在終端中可使用flutter create
• 也能夠在VSCode中打開命令面板 找到Flutter: New Project執行

Assists & Quick Fixes

• 命令面板 Quick fix或者快速修復(沒錯支持中文輸入=。=)
• 或者使用快捷鍵cmd + .

Sort Members

• 命令面板 Sort Members
• 或者 右鍵->源代碼操做->Sort Members
• 也能夠自定義Sort Members的快捷鍵

Organize Imports

• 命令面板Organize Imports
• 或者 右鍵->源代碼操做->Organize Imports
• 或者 快捷鍵shift + option + o

格式化(Fotmat Document)

• 命令面板Fotmat Document
• 或者 右鍵->設置文檔的格式
• 或者 快捷鍵 shift + option + f

Go to Definition

• 右鍵 轉到定義
• 快捷鍵f12 或者 cmd+左鍵

Find All References

• 右鍵 Find All References

代碼片斷

Flutter擴展包含了一些經常使用的代碼片斷

• stless StatelessWidget
• stfull StatefulWidget
• stanim StatefulWidget with AnimationController

咱們也能夠增長本身自定義的代碼片斷

1. 在控制檯輸入Configure User Snippets / 首選項:配置用戶代碼片斷
2. 選擇dart.json
3. 編寫本身的代碼片斷

這是咱們寫的代碼片斷可作參考

使用VSCode調試

運行Flutter項目

• 調試->啓用調試(F5)

能夠在命令面板送找到Debug:Select and Start Debugging執行->選擇添加配置->選擇Dart&Flutter,這樣就不用每次都選調試環境了。 也能夠在調試界面 選擇小齒輪 選擇Dart&Flutter

hot reload

• save(cmd+s)
• 或者點擊綠色圓形箭頭按鈕

選擇調試設備

• 在界面右下角能夠選擇設備

• 或者命令面板 找到Flutter: Select Devices

視圖調試

在運行flutter的時候打開命令面板輸入 Flutter:Toggle 便可看到熟悉的命令

• Toggle Baseline Painting
• Toggle Repaint Rainbow
• Toggle Slow Animations
• Toggle Slow-Mode Banner

Observatory

命令面板 Dart: Open Observatory

調試控制檯

不少時候VSCode開發體驗都蠻好的，可是調試控制檯真的難用，還不支持搜索。 不過咱們能夠設置flutter log輸出文件，用其餘軟件來看log。

• 在用戶設置中搜索 flutter run log 中設置

• 用其餘軟件打開這個文件 好比自帶的控制檯open -a Console .vscode/run.log

VSCode使用Tips

強大的cmd+p 和 cmd+shift+p

cmd+p能夠跳轉到文件，可是能夠輸入？得到更多操做

cmd+shift+p 是命令面板，有各式各樣的命令，還會提示命令的快捷鍵 好比我忘了Quick Fix的快捷鍵，就能夠方便的找到

快捷鍵

有小夥伴不喜歡VSCode自身的快捷鍵能夠去下載擴展

或者去設置中修改鍵盤快捷方式

插件

• Bracket Pair Colorizer 2 Flutter代碼括號不少 這個插件能夠很方便的區分
• GitLens 神器 用了徹底離不開=。=

VSCode 與 IDEA

VSCode的優點 - 開發體驗更好

• 輕，開多個工程毫無壓力
• 更換主題方便
• GitLens插件真的好用

IDEA的優點 - 調試功能更強

• flutter調試功能更多更方便 Flutter Inspector中Widgets,Render Tree,Performance
• 調試功能更強大 Grep Console插件很方便

本文版權屬於再惠研發團隊，歡迎轉載，轉載請保留出處。@白爾摩斯