DEV Community

Cover image for VS Code Extensions to become a more productive Developer 🤓🤓🤓
Benjamin Mock
Benjamin Mock

Posted on

VS Code Extensions to become a more productive Developer 🤓🤓🤓

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at

These are some of the VS Code Extension that I'm using on a regular basis to make me a more productive developer. This is not a complete list, but these are some of my favorite extensions.

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colors, which comes super handy in almost every use case.
A lot of you might new the Bracket Pair Colorizer extension already because it's an essential extension of VS Code. But version two of the extension is even faster and more performant.

Alt Text

Import Cost

This extension will display the size of the imported package inline in your editor. Of course, you can also do that yourself using bundlephobia but using the Import Cost extension just saves you some time with every package.

Toggle Quotes

The Toggle Quotes extension comes in quite handy if you have to switch from one type of quotes to another. Let's say you start to delimit your string with double quotes (in JS), but then realize that your string actually contains a double quote. With just hitting cmd ' or ctrl ' on win/linux you can easily change the wrapping quotes of your string. It's of course also super handy to switch from double quotes to a JavaScript string literal.


Are you working with multiple VS Code workspaces and multiple projects?
Peacock lets you change the color of your VS Code workspace. It's ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor and distinguish between multiple projects.

Alt Text


If you want to create beautiful "screenshots" of your code, to share it for example on Twitter, this is the extension to use. Polacode let's you select the code, resize the resulting snippet and create a perfectly shareable screenshot of your code using your VS Code theme and font.

Alt Text

Better Comments

Better Comments is a cool extension to give different types of comments different colors. It helps you e.g. to easily differentiate between TODOs and "real" comments.

Alt Text


Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that for example take the maximum line length into account and wrapping code when necessary. The times where you have to indent code, add trailing commas or discuss code style with your colleagues is over. Let prettier format your code automatically. Of course, you can also use your own rules for indentation, quotes, etc.

Alt Text

Indent Rainbow

Indent Rainbow colorizes the indentation in front of your text alternating four different colors on each step. It might be a bit too much if you're Bracket Pair Colorizer in combination, but if you're e.g. using Python where your indentation indicates a block of code, it can be very useful.

Alt Text

What about you?

What are your favorite VS Code extensions to make you a more productive developer? Please share them in the comments!

Want to get better at Web Development?
🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter

Top comments (22)

oricis profile image
Moisés Alcocer

Markdown Preview Github Styling to visualize Markdown documents
Auto Rename Tag and htmltagwrap to write HTML / JSX
Code Spell Checker to write in English or other languages...
Git Graph to watch your Git history

yatki profile image
Mehmet Yatkı

Maybe this one helps someone too :)

GitHub logo yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks


Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License

A simple yet powerful extension to add wrapper templates around your code blocks


  • Supports multi selections
  • Fully customizable
  • Custom wrapper functions
  • You can assign shortcuts for each wrapper function separately
  • Nicely formated

Demo 1: Choosing wrapper function from quick pick menu

Demo 1

Demo 2: Wrapping multi selections

Demo 2

How To Use

After selecting the code block, you can

  • right click on selected code
  • OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.


Each wrapper has a separate command so you can define keybindings for your favourite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands

Command Snippet

surround.with (ctrl+shift+T)
List of all the enabled commands below
surround.with.if if ($condition) { ... }
surround.with.ifElse if ($condition) { ... } else { $else }
surround.with.tryCatch try { ... } catch (err) { $catchBlock }
surround.with.tryFinally try { ... } finally { $finalBlock


marian2js profile image
Mariano Pardo • Edited

Thanks for sharing this one. I'm sure I'm going to use the surrounding in <element></element> a lot.

crocsx profile image
Federico Giacomini

Well I guess after checking this article and installing your new extension, you would find this one SUPER handy. It allow you to save you extension on a github gist, so you can import/export and quickly setup your environment on fresh VSCode installation =>

mpressen profile image
Maximilien Pressensé

Settings Sync is now a previewed feature of Vs Code, already available in Vs Code Insiders. It works much better than the extension you're talking about (that I happily removed due to bad UX and bugs).

benjaminmock profile image
Benjamin Mock

Nice! Thanks for the hint!

benjaminmock profile image
Benjamin Mock

That's indeed super handy. Thanks for the recommendation!

boxpiperapp profile image

That’s awesome!
Polacode is new !

nicoespeon profile image
Nicolas Carlo

Oh yeah, Peacock & Prettier are really helpful to me! 🙏

Bracket Pair Colorizer is also the kind of extension you install, then you wonder how life was before!

I'm also the maintainer of an extension that provides automatic refactorings for JS & TS. It's called Abracadabra.

I like how I can extract/inline variables with a single keystroke ⚡

Example of extracting variables with Abracadabra

flux profile image
Flux • Edited

never thought there is an extension like Peacock, thanks for sharing. by the way, you should try Comment anchors. it's an extensions to make a comments as a checkpoint when your code is just too much. Perfect to pair up with better comments.

felipeschossler profile image
Felipe Schossler

I never though about some extension like Peacock too, and it's really useful.

stephanedupuy profile image
Stéphane DUPUY

Thank you Benjamin to share your experiences

tabnine profile image

TabNine AI code completion is very helpful. TabNine is based on GPT-2 models, which provide some of the most amazing code predictions

hqjs profile image

How about hqjs? A build tool and smart development server

chuchhin profile image
Jesús Sánchez

Thank you very much, I have installed many extensions that you recommend.

benjaminmock profile image
Benjamin Mock

Cool stuff! Thanks for the recommendation! I'll do a part two and definitely add them.

rakgenius profile image

For whatever reason, the intellisense doesnt work for huge java projects in vscode and forcing it to use it only for smaller projects

ionutbuzatu profile image
Ionut Buzatu • Edited

Thank you for this article .
Was very helpfuly :)

ionutbuzatu profile image
Ionut Buzatu

Thank you for this article . Was very helpfuly for me.
My favorite extensions are :

taufik_nurrohman profile image
Taufik Nurrohman