[Compilation and sharing] 10 best extensions for Flutter development in VSCode

This article will share with you the 10 best VSCode extensions for Flutter development. I hope it will be helpful to you!

1.Pubspec Assist

Are you tired of looking for necessary Flutter and Dart packages on pub.dev? You should give the Pubspec Assist extension a chance. This extension allows you to search for packages and then append them to a pubspec.yaml document without giving up the editor. Additionally, it allows you to search for many packages simultaneously by separating the titles with commas.

2.Error Lens

During development, errors and warnings are normal, but the methods we use to handle them are unique. In the VS Code editor, errors and warnings usually appear at the bottom, and we have to scroll through the list to see if there are other issues. [Recommended learning: vscode tutorial, Programming Teaching]

Error Lens extension highlights the error line in the code and adds a text at the end of the line Error details attached. Error icons are also displayed in the trench.

In addition, you can customize the error highlight color in the settings.json file. This will make your mistake appear more tempting.

3.Flutter Tree

When building an application with a large number of widgets, it can be difficult to identify widgets in the tree. Flutter TreeExtension creates the desired widget tree with simplified syntax. This makes it easier to create a widget tree, but you have to do it using its own syntax, as shown below.

4.Bracket Pair Colorizer 2

We often get lost in the maze of nested classes and widgets and waste a lot of time and energy trying to find Correct pair of brackets. Bracket Pair Colorizer 2 is a savior when it comes to positioning the wrong brackets.

You can also customize the color of bracket pairs.

5.Dart Data Class Generator

Usually, we ignore the creation of required methods in the class. VS Code has a utility that allows you to add missing methods, but you can only add them one at a time. Dart Data Class Generator Overcomes this problem by using constructor, copyWith, toMap, fromMap, toJson, fromJson, toString, operator == and hashCode methods based on class attributes or raw JSON to build Dart data classes , as its name suggests.

This extension also sorts imports alphabetically and converts them into the appropriate format.

6.Flutter Stylizer

Managing a complex code base with insufficient structure will reduce the efficiency of engineers. Flutter Stylizer The extension eliminates this problem by organizing your methods in a consistent and assertive way.

This tool organizes the classes in the file in the following way:

Constructor--named constructor--public static variable--public instance variable--public overlay variable--private static Variables--Private instance variables--Public overriding methods--Other public methods--Build methods.

Flutter itself provides formatting options, however, it only formats Dart files, it does not reorder the code. Flutter formats code according to these formatting rules.

7.Better Comments

If all comments were in the same format, we would not be able to organize our work according to importance and risk overlooking important tasks. Better Comments The extension helps create colorful comments, which makes them more readable. This makes it easier to track code comments.

All you have to do is use *, ! Start a comment with , ? or TODO, and it will be colored in the specified way. You can also create your own annotation style using the settings.json file.

8.Color Highlight

When building a program we manage a wide range of color choices, but assume the color we are programming in the code editor visible? It would be very advantageous to display program colors without needing to launch the program. Color HighlightThe plugin can view the colors specified in the code through stylized colors.

9.Markdownlint

There is no validator in the Flutter project to ensure that issues in the README.md or CHANGELOG.md documents are detected. To remedy this, the Markdownlint plugin provides a set of guidelines to encourage standards and uniformity in Markdown files. You can use this extension to check for local issues and verify content before live publishing.

In this image, you can see some errors, such as multiple consecutive blank lines, the header level should be incremented by one, and the list should be surrounded by blank lines. Related to this, I want to remind you that you can preview Markdown files in VS Code by using the preview button.

10.JSON to Dart Model

When dealing with a large number of JSON files, it is laborious to build a Dart model for each file. JSON to Dart ModelCreate a Dart class for the given JSON string. You can make a JSON value required or default by adding r@ or d@ to your JSON key and JSON to Dart Model will produce a Dart model for you.

In the image below, the JSON file is shown on the left and the required classes and properties are shown on the right, which is generated from the JSON file using the JSON to Dart Model extension.

For more knowledge about VSCode, please visit: vscode Basic Tutorial!

The above is the detailed content of [Compilation and sharing] 10 best extensions for Flutter development in VSCode. For more information, please follow other related articles on the PHP Chinese website!