使用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 2Flutter代碼括号很多 這個插件可以很友善的區分
• GitLens神器 用了完全離不開=。=

VSCode 與 IDEA

VSCode的優勢 - 開發體驗更好

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

IDEA的優勢 - 調試功能更強

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

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

作者：更新之路

連結：https://juejin.im/post/5c19f4b551882543871d62fc

來源：掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。