DoYouEvenFlutter [EP.4] Boost your coding productivity with this Flutter VSCode setup in 2021

Hello, coders!

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!

This came as surprise to me how much I would love Microsoft Visual Studio Code. You know… Microsoft. The flexibility of this tool is remarkable. I’ve programmed using it with PHP, JavaScript, Typescript, Dart, Go, Bash, etc (HTML and CSS — not included). Not even that it can support EVERY language, but It can also support ALL the frameworks. It’s community-driven so it’s up to us what are its features!

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:

Without this little fella, I would waste 20% of my life on writing boilerplate code. Simply by typing:

statelessW

..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.

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.

build function that doesn't make sense. Just an example.

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 😜

color coded brackets! Yay!
change-case

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.

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!

Make sure to follow me on Medium and Twitter.

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!

Luke

Here are previous articles in this series:

Med-tech Flutter developer. #tech and #programming enthusiast, (some)content-creator. If you need some software related advice feel free to ask me on Twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store