[Compilation et partage] 10 meilleures extensions pour le développement Flutter dans VSCode

Cet article partagera avec vous les 10 meilleures extensions VSCode pour le développement Flutter. J'espère qu'il vous sera utile !

1.Pubspec Assist

Êtes-vous fatigué de chercher les packages Flutter et Dart nécessaires sur pub.dev ? Vous devriez donner une chance à l’extension Pubspec Assist. Cette extension vous permet de rechercher des packages puis de les ajouter à un document pubspec.yaml sans abandonner l'éditeur. De plus, il vous permet de rechercher plusieurs packages simultanément en séparant les titres par des virgules.

2.Error Lens

Pendant le développement, les erreurs et les avertissements sont normaux, mais les méthodes que nous utilisons pour les gérer sont uniques. Dans l'éditeur VS Code, les erreurs et les avertissements apparaissent généralement en bas, et nous devons faire défiler la liste pour voir s'il y a d'autres problèmes. [Apprentissage recommandé : Tutoriel vscode, Enseignement de la programmation] L'extension

Error Lens met en évidence les lignes d'erreur dans le code et ajoute les détails de l'erreur à la fin de la ligne. Des icônes d'erreur sont également affichées dans la tranchée.

Vous pouvez également personnaliser la couleur de surbrillance de l'erreur dans le fichier settings.json. Cela rendra votre erreur plus tentante.

3.Flutter Tree

Lors de la création d'une application avec un grand nombre de widgets, il peut être difficile d'identifier les widgets dans l'arborescence. L'extension Flutter Tree crée l'arborescence de widgets souhaitée avec une syntaxe simplifiée. Cela facilite la création d'une arborescence de widgets, mais vous devez le faire en utilisant sa propre syntaxe, comme indiqué ci-dessous.

4. Bracket Pair Colorizer 2

Nous nous perdons souvent dans le labyrinthe de classes et de widgets imbriqués et perdons beaucoup de temps et d'énergie à essayer de trouver la bonne paire de brackets. Lorsqu'il s'agit de positionner les mauvais supports, Bracket Pair Colorizer 2 est un sauveur.

Vous pouvez également personnaliser la couleur des paires de supports.

5. Générateur de classes de données Dart

Habituellement, nous ignorons la création des méthodes requises dans une classe. VS Code dispose d'un utilitaire qui vous permet d'ajouter les méthodes manquantes, mais vous ne pouvez les ajouter qu'une par une. Dart Data Class Generator surmonte ce problème, il utilise les méthodes constructor, copyWith, toMap, fromMap, toJson, fromJson, toString, Operator == et hashCode basées sur des attributs de classe ou du JSON brut, comme son nom l'indique.

Cette extension trie également les importations par ordre alphabétique et les convertit au format approprié.

6.Flutter Stylizer

Gérer une base de code complexe avec une structure insuffisante réduira l'efficacité des ingénieurs. L'extension Flutter Stylizer élimine ce problème en organisant vos méthodes de manière cohérente et affirmée.

Cet outil organise les classes dans un fichier de la manière suivante :

Constructeur -- Constructeur nommé -- Variables statiques publiques -- Variables d'instance publiques -- Variables de remplacement publiques -- Variables statiques privées -- Variables d'instance privées -- Variables d'instance publiques remplacées méthodes--Autres méthodes publiques--Méthodes de construction.

Flutter lui-même fournit des options de formatage, cependant, il formate uniquement les fichiers Dart, il ne réorganise pas le code. Flutter formate le code selon ces règles de formatage.

7. De meilleurs commentaires

Si tous les commentaires étaient dans le même format, nous ne serions pas en mesure d'organiser notre travail en fonction de leur importance et risquons de négliger des tâches importantes. L'extension Better Comments permet de créer des commentaires colorés, ce qui les rend plus lisibles. Cela facilite le suivi des commentaires de code.

Tout ce que vous avez à faire est d'utiliser *,  ! , ? ou TODO démarre un commentaire et il sera coloré de la manière spécifiée. Vous pouvez également créer votre propre style d'annotation à l'aide du fichier settings.json. *、！、?或TODO开始注释，它就会以指定的方式被着色。你还可以使用settings.json文件创建你自己的注释风格。

8.Color Highlight

在构建程序时，我们管理广泛的颜色选择，但假设我们正在编程的颜色在代码编辑器中是可见的？这将是非常有利的显示程序的颜色，而不需要启动程序。Color Highlight插件可以查看代码中通过样式化颜色指定的颜色。

9.Markdownlint

Flutter项目中没有验证器可以确保检测到README.md或CHANGELOG.md文档中的问题。为了弥补这一点，Markdownlint插件提供了一套准则，以鼓励Markdown文件的标准和统一性。你可以使用这个扩展来检查本地的问题，并在实时发布之前验证内容。

在这张图片中，你可以看到一些错误，如多个连续的空行，标题级别应该递增一个，以及列表应该被空行包围。与此相关，我想提醒你，你可以通过使用预览按钮在VS Code中预览Markdown文件。

10.JSON to Dart Model

当处理大量的JSON文件时，为每个文件构建Dart模型是很费力的。JSON to Dart Model为给定的JSON字符串创建一个Dart类。通过在你的JSON键中添加r@或d@

8.Color Highlight

Lors de la construction d'un programme, nous gérons une large sélection de couleurs, mais supposons que les couleurs que nous programmons soient visibles dans l'éditeur de code ? Il serait très avantageux d'afficher les couleurs du programme sans avoir besoin de lancer le programme. Color Highlight peut afficher les couleurs spécifiées via des couleurs stylisées dans le code.

9.Markdownlint

Il n'y a pas de validateur dans le projet Flutter pour garantir que les problèmes dans les documents README.md ou CHANGELOG.md sont détectés. Pour compenser cela, Markdownlint🎜 fournit un ensemble de directives pour encourager les normes et l'uniformité dans les fichiers Markdown. Vous pouvez utiliser cette extension pour rechercher des problèmes localement et vérifier le contenu avant de le publier en direct. 🎜🎜Dans cette image, vous pouvez voir certaines erreurs telles que plusieurs lignes vides consécutives, le niveau d'en-tête doit être incrémenté de un et la liste doit être entourée de lignes vides. À ce propos, je tiens à vous rappeler que vous pouvez prévisualiser les fichiers Markdown dans VS Code en utilisant le bouton d'aperçu. 🎜🎜🎜

10.JSON vers Dart Model🎜🎜Lorsque vous traitez un grand nombre de fichiers JSON, il est laborieux de créer un modèle Dart pour chaque fichier. JSON to Dart Model🎜Crée une classe Dart pour la chaîne JSON donnée. Vous pouvez rendre une valeur JSON obligatoire ou par défaut en ajoutant r@ ou d@ à votre clé JSON et JSON vers Dart Model générera un modèle Dart pour vous. 🎜🎜Dans l'image ci-dessous, le fichier JSON est affiché à gauche et les classes et propriétés requises sont affichées à droite, qui est générée à partir du fichier JSON à l'aide de l'extension JSON to Dart Model. 🎜🎜🎜🎜🎜Pour plus de connaissances sur VSCode, veuillez visiter : 🎜Tutoriel de base de vscode🎜 ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!