VS Code Tips & Tricks
Extensions in VS Code are simply plugins that extend the capabilities of VS Code and improve the development experience. VS Code marketplace hosts thousands of extensions that can be easily installed in your editor.
Inside of VS Code, press Ctrl + Shift + X to go to the Extensions view. It shows you the enabled, recommended and disabled extenstions. It also provides a search box to search for extensions in Marketplace.You can see flutter related extensions.
The search box also accepts a query language. Type in the @ sign. This shows a list of possible queries we could execute from here. So you can see that typing in @installed shows you the installed extensions.
You can also search based on a category. So you can search for extensions based on programming languages. And you can see related extensions for Python, C++ and the rest. The first extension we would be installing is the “Awesome Flutter Snippets.”
Click on the “install” button. This installs it and enables it globally. This extension provides us with lots of commonly used snippets for Flutter development.
Let’s head over to a dart file and see it in action. Let’s use the customPainter. And you can see this generates a CustomPainter class. Let’s use some other snippet. And you can see it has a ListView.builder() snippet.
There are lots of snippets which you could explore. And this extension creates lots of snippets for you so you dont have to create them from scratch. Next is the “Flutter Tree” extenstion. Let’s search for it. Click on the install button.
This extension borrows inspiration from Emmet which helps create nested tree like markup for HTML code. Flutter Tree extension generates nested widgets from basic queries.
Head over to a dart file and lets see it in action. Comment out the previous code in the GroupTitle widget. Enter the following:
Container>Column[Text,Row]
Press Ctrl + Space to show the auto suggestion context menu. You can see the “Flutter Tree” action at the top. Select it and this generates a Container that has a Column with two children which is a Text and a Row. So you use the Flutter Tree Extension to just save time while creating nested widgets.