DoYouEvenFlutter [EP.4] Boost your coding productivity with this Flutter VSCode setup in 2021
I am Luke and I am a Flutter dev. Here is my setup 😉
As a full-time Flutter developer, with a few good years of commercial experience, I can say a good environment is something that can boost your productiveness by quite a lot!
VSCode — my integrated development environment (IDE).
Now! Right! How does Flutter work with VSCode?
For those who are starting coding in general and are not familiar with this IDE.
VSCode is an extension driven which means you need to install an extension to introduce a new feature to your code editor.
For Flutter, there are two basic ones: Dart and Flutter. Without them programing in Dart (language in which Flutter, the framework, is written) is impossible.
There are also hundreds upon hundreds of extensions that will improve your coding experience. Here are mine:
Awesome Flutter Snippets
Without this little fella, I would waste 20% of my life on writing boilerplate code. Simply by typing:
..and hitting enter we are given this beautiful stateless widget:
It’s worth mentioning that, after code, the generation, the word ‘name’ both in class name and in the constructor is highlighted and we can proceed with naming this widget. Awesome Flutter Snippets comes with more than 30 similar code generation shortcuts. All of them can be found here.
Flutter Provider Snippet
If you use provider you definitely have to check out Flutter Provider Snippets which is a very similar extension to Awesome Flutter Snippets but it provides shortcuts to make your provider workflow as quick as possible! Link here.
Bracket Pair Colorizer 2
I might say this too many times in this article, but I love this extension. Bracket Pair Colorizer 2 is very simple, but powerful.
Imagine you have an every complicated widget structure, like the one above. It’s nearly impossible to pair those brackets together. But by color-coding bracket pairs it is doable! This extension also saved me a few hours of my life, therefore my efficiency craving brain is satisfied 😜
Mapping JSON backend response to a Flutter object sometimes requires changing this_awesome_id to thisAwesomeId or the other way around, it depends on your use case. Either way, using a mouse to do that is very inefficient. That is why I use change-case plugin. After installing it, select text you want to modify, then open the command palette and select fitting command.
Copy Copy Paste
This one is a must! I was introduced to this functionality when I was using PhpStorm and now, I can not imagine leaving without it. This plugin basically stores your clipboard history and provides you with a modal where you can pick or search the thing you want to paste. To see it you type shift+ctrl+v / shift+cmd+v.
Here you have a full list of my flutter related and productivity plugins:
You can download them by searching in vscode or you can use the links above.
Few last words…
Make sure you USE the plugins you install. If you install something and then you never use it — uninstall it immediately.
Software development sometimes is very repetitive — you need to create the same file structures or write some boilerplate code. Bill Gates is often credited with the quote:
“I will always choose a lazy person to do a difficult job because a lazy person will find an easy way to do it.”
So the message I want you to remember is: Be lazy when it’s needed.
If you’re reading this — thank you, you’re awesome!
If you leave some claps here I’ll be a very happy programmer and you’ll make my code better and faster.
LET the code be with you!
Here are previous articles in this series: