這里是堅果前端小課堂，大家喜歡的話，可以關注我的公眾號“堅果前端，”，或者加我好友，獲取更多精彩內容

vscode開發插件推薦

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

如何安裝擴展？

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

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

現在讓我們進入擴展，看看我們能做什么奇跡。

flutter開發VScode插件推薦

Image preview

這是一個非?？岬臄U展，它在懸停和裝訂線時顯示圖像預覽，當您處理大量圖像時可以派上用場。您可以預覽以下文件類型：PNG、JPEG、JPG、GIF、SVG。這有助于我們避免在圖像路徑或名稱方面犯任何錯誤。如果您將鼠標懸停在 path 上，擴展名會提供指向項目結構及其維度中的文件的鏈接。

Material Icon Theme

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

如何使用它？

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

Color Highlight

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

Awesome Flutter Snippets

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

Awesome Flutter Snippets 是常用 Flutter 類和方法的集合。它通過消除與創建小部件相關的大部分樣板代碼來提高您的開發速度?？梢酝ㄟ^分別鍵入快捷方式和來創建諸如StreamBuilder和 之類的小部件。

Pubspec assist

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

Bracket Pair Colorizer 2

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

如何使用它？

Dart Getters And Setters

使用此擴展，您可以輕松地為所有必需的變量創建 getter 和 setter。

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

Flutter Intl

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

如何使用它？

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

FF Flutter Files

這個擴展允許在 VS Code 項目中快速搭建 flutter BLoC 模板。

如何使用它？

右鍵單擊當前項目中的文件或文件夾。您可以找到添加到上下文菜單中的多個選項，例如 New Bloc、New Event、New Model、New Page 等。

Flutter Tree

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

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

Better Comments

這是 VS 代碼開發人員使用的另一個流行擴展。它有助于創建豐富多彩的評論，這實際上使評論更具可讀性。這有助于以更好的方式維護代碼注釋。評論可以幫助團隊中的其他開發人員或我們未來的自己。您可以在評論中寫 TODO，這有助于以后不會錯過任何重要的作品。在評論中，您只需以 * 或 ! 或者 ？或 TODO，它會自動具有特定的顏色。

Error lens

錯誤鏡頭有助于使診斷更加突出，在語言生成診斷的任何地方突出顯示整行，并內聯打印消息。

Todo Tree

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

Path Autocomplete

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

Polacode-2020

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

如何使用它？

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

GitLens — Git supercharged

它可以幫助您通過 Git 責備注釋和代碼鏡頭一目了然地可視化代碼作者，無縫導航和探索 Git 存儲庫，通過強大的比較命令獲得有價值的見解等等。

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

總結

以上是生活随笔為你收集整理的flutter开发vscode插件推荐（开发必备）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。