iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Mobile Development

Why Flutter why? 從表層到底層,從如何到為何。系列 第 14

days[13] = "IntelliJ/AS做得比VSCode好的幾件事"

老實說這系列真的是寫到心很累,總之今天大家就稍微輕鬆一點,來戰個IDE吧。

最近因為工作的關係,一下寫web(WebStorm)一下寫backend(IntelliJ)一下做AI(PyCharm),加上鐵人賽和家教還是要繼續寫Flutter(Android Studio+AppCode)。雖然我個人是死忠JetBrain粉,但也開始考慮給VSCode一個一統江湖的機會,於是先嘗試用它來開發Flutter。雖然這篇主要是講IntelliJ/Android Studio做得稍微好一點的地方,但其實這幾天VSCode實際體驗已經比我想的好很多了,大多重要的功能該有的都有。也許等我再熟一點,下次就可以再寫一篇「VSCode做得比IntelliJ/AS好的十件事」了。

好我們進入正題吧:


1. auto-complete

Auto-complete絕對是所有IDE功能裡面,最常被使用到的,可以說寫code的每分每秒都在使用它。因此對我來說,它的重要性和其它功能比起來,完全不是同一個量級的。

那麼我們先來看看VSCode表現如何

再來看看Android Studio

可以看到雖然VSCode一開始多建議了main,但後續幾個MaterialApp, body, Center都沒有建議到。相較之下Android Studio在所有能給建議的地方,都正確的給出了最佳的建議。有想過也許VSCode需要經過一些學習?但是同樣的程式碼在VSCode重複打了十次,還是一模一樣的結果。

如果我最後還是決定換回Android Studio八成就是這個原因了,相較之下其它都可以說是雞毛蒜皮的小事,不過還是讓我們繼續看下去。


2. search everywhere

Imgur
左邊是AS右邊是VSCode。這也是一個非常常使用的功能,主要差異在於AS有一個all的頁面可以一次列出File, Class, Symbol, Action,但VSCode只能分別去搜尋。


3. correction selection expansion

這次我們先來看AS,假設我們想選到整個Center的話:

再來看看VSCode:

我們發現VSCode沒辦法只選到整個Center,一定會帶到它的child標籤。這對我來說蠻困擾的,因為Flutter開發經常都是以Widget為單位在做修改,可能我想把Center換成Align,或把它copy/paste到其它地方,多了一個child就多一點編輯的麻煩。


4. find all reference


尋找某個symbol所有被使用到的地方,應該也是大家很常用的功能吧?這裡假設我們想知道Element的_parent在哪些地方被使用到。AS可以根據file, class, package, module, usage各種不同的條件去做grouping,相對的VSCode就只能根據File,如果遇到像framework.dart這種一個檔案很多class的狀況就很難用了。不過這裡對我來說最重要的其實是usage,尤其是write,如果我們很不幸的有一個Mutable Global Variable,當它出問題時我們絕對會想找出它在哪些地方被write了。


5. Type Hierarchy


如果你有看這系列之前幾篇分析source code的文章,應該會看到我使用它。能清楚看見一個class向上向下的所有繼承關係,對於快速理解程式架構是很有幫助的。可惜我在VSCode找不到對應的功能,如果有人知道隨時歡迎留言告知。


6. choose method to override


這是另一個好像只有AS有,在VSCode找不到的功能。當我們繼承了一個class,想要override一些method時,如果我們知道我們要找的是什麼,可以直接開始輸入method name,兩邊都會給出override method的auto-complete建議。但如果我們不知道有什麼可以override,或像我常常忘記目標的method name,這時候有一個介面列出所有可以override的method也蠻不錯的。而且這裡我們還可以一次override好幾個,酷吧!


7. icon/color preview


Flutter畢竟是個UI Framework,選icon選顏色也是很常發生的事,這時候可以在自動完成建議裡直接預覽也是蠻方便的。


有沒有感覺後面幾個越來越雞毛蒜皮了?就像一開始說的,VSCode的表現其實已經超出我的預期不少了。如果我後續還有發現什麼VSCode沒辦法滿足我的地方,再繼續補充到這篇吧。


上一篇
days[12] = "key是如何影響updateChildren的?"
下一篇
days[14] = "想瞭解Hot Reload如何運作,就自己來實作!"
系列文
Why Flutter why? 從表層到底層,從如何到為何。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言