這里是堅(jiān)果前端小課堂，大家喜歡的話，可以關(guān)注我的公眾號(hào)“堅(jiān)果前端，”，或者加我好友，獲取更多精彩內(nèi)容

vscode開發(fā)插件推薦

擴(kuò)展是完成工作的快捷方式,。許多擴(kuò)展有助于減少重復(fù)性工作、減少樣板代碼等,。其他一些擴(kuò)展有助于協(xié)助開發(fā)過程，甚至有助于更快,、更高效的開發(fā)。

如何安裝擴(kuò)展？

首先快速回顧一下如何安裝擴(kuò)展,。在 VS Code 中，單擊左側(cè)的擴(kuò)展，然后搜索擴(kuò)展并單擊安裝,。

首先，我希望您啟用了 Dart 和 Flutter 擴(kuò)展，如果沒有，您可以從這里獲取它們：Dart和Flutter,。這些提供了很多功能，通常當(dāng)您開始使用 flutter 時(shí)，您肯定會(huì)安裝這些。

現(xiàn)在讓我們進(jìn)入擴(kuò)展，看看我們能做什么奇跡,。

flutter開發(fā)VScode插件推薦

Image preview

這是一個(gè)非?？岬臄U(kuò)展，它在懸停和裝訂線時(shí)顯示圖像預(yù)覽，當(dāng)您處理大量圖像時(shí)可以派上用場(chǎng)。您可以預(yù)覽以下文件類型：PNG,、JPEG,、JPG、GIF,、SVG,。這有助于我們避免在圖像路徑或名稱方面犯任何錯(cuò)誤。如果您將鼠標(biāo)懸停在 path 上，擴(kuò)展名會(huì)提供指向項(xiàng)目結(jié)構(gòu)及其維度中的文件的鏈接,。

Material Icon Theme

Material Theme Icons 用于向看起來有吸引力的文件夾顯示有吸引力的圖標(biāo)主題,。它還可以更輕松地識(shí)別文件和文件夾。

如何使用它？

啟動(dòng)命令面板（默認(rèn)情況下，Ctrl+Shift+P在 Windows 上，?+Shift+P在 Mac 上）并鍵入Material Icons，選擇Activate Icon Theme,。激活后，圖標(biāo)將出現(xiàn)在您的資源管理器側(cè)欄中,。它有很多自定義功能，例如您可以更改顏色等。

Color Highlight

很多時(shí)候我們使用不同的顏色，這個(gè)擴(kuò)展可以方便地查看通過在我們的代碼中設(shè)置顏色樣式而給出的顏色,。

Awesome Flutter Snippets

這是Jeroen Meijer創(chuàng)建的最著名和最常用的擴(kuò)展之一，許多頂級(jí) Flutter 開發(fā)人員都建議使用它,。這樣可以更輕松地將 pub 添加到pubspec.yaml，而無需離開您的編輯器。這只會(huì)添加最新版本，因此它也可以用于更新現(xiàn)有的 pub,。提供的一個(gè)很好的擴(kuò)展 ，他從一開始就與 Flutter 聯(lián)系在一起，并且是 Flutter 社區(qū)的主要貢獻(xiàn)者,。此擴(kuò)展程序是最新的，沒有已知問題，如果有任何問題，您可以直接聯(lián)系任何幫助。

Awesome Flutter Snippets 是常用 Flutter 類和方法的集合,。它通過消除與創(chuàng)建小部件相關(guān)的大部分樣板代碼來提高您的開發(fā)速度,。可以通過分別鍵入快捷方式和來創(chuàng)建諸如StreamBuilder和 之類的小部件,。

Pubspec assist

這是Jeroen Meijer創(chuàng)建的最著名和最常用的擴(kuò)展之一，許多頂級(jí) Flutter 開發(fā)人員都建議使用它,。這樣可以更輕松地將 pub 添加到pubspec.yaml，而無需離開您的編輯器。這只會(huì)添加最新版本，因此它也可以用于更新現(xiàn)有的 pub,。

Bracket Pair Colorizer 2

我們經(jīng)常迷失在嵌套部件樹和嵌套類的迷宮中，花費(fèi)大量時(shí)間尋找括號(hào)對(duì),。此擴(kuò)展使通過顏色編碼更容易找到括號(hào)對(duì)。您可以自定義與括號(hào)和活動(dòng)范圍顯示相關(guān)的顏色和許多其他功能,。它還提供了用于擴(kuò)展 ( *shift+alt+right)*和撤消 ( shift+alt+left)括號(hào)選擇的鍵盤快捷鍵,。

如何使用它？

Dart Getters And Setters

使用此擴(kuò)展，您可以輕松地為所有必需的變量創(chuàng)建 getter 和 setter。

只需選擇需要 getter 和 setter 的變量，然后右鍵單擊并選擇Generate Getters and Setters選項(xiàng),。

Flutter Intl

這有助于在 .arb 文件的翻譯和 Flutter 應(yīng)用程序之間創(chuàng)建綁定,。它為官方 Dart Intl庫生成樣板代碼，并為 Dart 代碼中的鍵添加自動(dòng)完成功能。

如何使用它？

打開命令面板（默認(rèn)情況下，Ctrl+Shift+P在 Windows 上，?+Shift+P在 Mac 上）并搜索Flutter Intl: Initialize命令。默認(rèn)情況下，en語言環(huán)境是通過自動(dòng)創(chuàng)建文件添加的lib/l10n/intl_en.arb,。您可以使用 command 添加更多語言環(huán)境Flutter Intl: Add locale,。

FF Flutter Files

這個(gè)擴(kuò)展允許在 VS Code 項(xiàng)目中快速搭建 flutter BLoC 模板。

如何使用它？

右鍵單擊當(dāng)前項(xiàng)目中的文件或文件夾,。您可以找到添加到上下文菜單中的多個(gè)選項(xiàng)，例如 New Bloc,、New Event、New Model,、New Page 等,。

Flutter Tree

這是用漂亮的語法構(gòu)建基本的小部件樹。這使得小部件樹更容易，但一個(gè)問題是你必須學(xué)習(xí)另一種新語法，如下所示：

OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild], OneChild>OneChild]

Better Comments

這是 VS 代碼開發(fā)人員使用的另一個(gè)流行擴(kuò)展,。它有助于創(chuàng)建豐富多彩的評(píng)論，這實(shí)際上使評(píng)論更具可讀性,。這有助于以更好的方式維護(hù)代碼注釋。評(píng)論可以幫助團(tuán)隊(duì)中的其他開發(fā)人員或我們未來的自己,。您可以在評(píng)論中寫 TODO，這有助于以后不會(huì)錯(cuò)過任何重要的作品,。在評(píng)論中，您只需以 * 或 ! 或者 ？或 TODO，它會(huì)自動(dòng)具有特定的顏色。

Error lens

錯(cuò)誤鏡頭有助于使診斷更加突出，在語言生成診斷的任何地方突出顯示整行，并內(nèi)聯(lián)打印消息,。

Todo Tree

Gruntfuggly 的 Todo Tree 非常方便，不僅在 flutter 中，而且在 VS Code 中也是如此,。它在資源管理器的 Treeview 中顯示代碼中的所有 TODO 和 FIXME 標(biāo)簽，從而幫助我們直接解決它們，而無需在代碼中手動(dòng)搜索它們，節(jié)省了大量時(shí)間。

Path Autocomplete

這是一個(gè)非常有用的擴(kuò)展，它可以為您的文件或文件夾提供路徑補(bǔ)全,。這使得將圖像或任何資源添加到我們的文件中變得更加容易,。

Polacode-2020

如果您撰寫文章或教程，這將非常有用。此擴(kuò)展程序可以幫助您從代碼中獲得漂亮的屏幕截圖

如何使用它？

啟動(dòng)命令面板（默認(rèn)情況下，Ctrl+Shift+P在 Windows 上，?+Shift+P在 Mac 上）并鍵入Polacode然后選擇您想要截圖的代碼,。

GitLens — Git supercharged

它可以幫助您通過 Git 責(zé)備注釋和代碼鏡頭一目了然地可視化代碼作者，無縫導(dǎo)航和探索 Git 存儲(chǔ)庫，通過強(qiáng)大的比較命令獲得有價(jià)值的見解等等,。

今天的知識(shí)分享到這兒就和大家說再見了，我們下期再見！