使用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擴展包含了一些常用的代碼片段

• stlessStatelessWidget
• stfullStatefulWidget
• stanimStatefulWidget 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 2Flutter代碼括號很多 這個插件可以很方便的區分
• GitLens神器 用了完全離不開=。=

VSCode 與 IDEA

VSCode的優勢 - 開發體驗更好

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

IDEA的優勢 - 調試功能更強

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

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

作者：升級之路
鏈接：https://juejin.im/post/5c19f4b551882543871d62fc
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。