10 Best VS Code Extensions To Make Your Development Life Easier

10 Best VS Code Extensions To Make Your Development Life Easier
Photo by krakenimages on Unsplash

These are the tools I use to not complicate things at work

“Be tough, be ambitious, and know exactly what you want.”

Bracket Pair Colorizer

Bracket Pair Colorizer by CoenraadS.

Its job is simple, the pairs should be of the same color.

Simplicity at its best but it's very powerful. Anyone who has been working with chunks of codes, nesting after nesting would really appreciate how helpful this is.

You cannot avoid getting yourself into the trouble of finding which the other pair is, even the senior developers have experienced it, and this extension will come to the rescue.

You can download this extension through your VSCode itself, you can find the built-in marketplace on the left panel.

Bookmarks

Bookmarks by Alessandro Fragnani.

This is also one of my favorite extensions. It helps me keep track of the codes that I needed to get back to, or even the codes that I wrote (when working in a team).

All it does is bookmark some block of codes that’s all. But it means so much more when you are working with tens of thousands of lines in a file.

Path Intellisense

Path Intellisense by Christian Kohler

The projects I’ve been working on contains hundreds of files with tens of thousands of lines of codes. YUP! I KNOW!

And trying to remember where everyone is, is stupid. (kudos to those who does though, you are amazing) but for me, I can’t.

Importing dependency files will require you to include its path, Path Intellisense will automatically fill that for you. That’s all it does, but it's magic.

Todo Tree

TODO Tree by Gruntfuggly.

Todo Tree will be displayed alongside the navigation on the left so you can easily see your guess what: TADAAA your TODO List.

This is probably not as cool as Pair Colorizer or the Path Intellisense but if you are like me who wants to see the bigger things before the details then this extension might come in handy.

JS (ES6) Code Snippets

JS(ES6) Code Snippet by Charalampos Karypidis.

Whether it's ES6 or ES7 or PHP or whatever language, these handy snippet extensions definitely need to be in your toolbox if you want to be as productive as possible.

With just using 2–3 characters you can already write an entire block of code, we all know that no matter what the language there are certain expressions or lines that we type on repeat. Gladly this extension will automate that for you, and so you can just focus on the codes that matter.

Git Lens

GITLens by Eric Amodio.

GitLens by definition supercharges the GIT capabilities inside VSCode. It will help visualize code authorship at a glance via GIT blame annotation.

Technically, you will see the authors of the codes line by line, who edited who, who created who, and most importantly who messes who.

In my own work experience, this extension saved my arse.

Someone from my team put the blame on me after a certain feature got messed up. I was able to defend myself by sending a screenshot of the code block that caused the entire chaos along with the developer who messed it up, (not bragging but that ain’t me).

Honestly, it was really satisfying not because it wasn’t me who is at fault but to that developer who pointed the finger at me.

NPM Intellisense

NPM Intellisense by Christian Kohler.

If you are using NPM, especially when working with ReactJS and NodeJS, then NPM Intellisense will help you a lot.

Importing packages also means you have to know its path, and this extension will automatically suggest the path code is in. All you have to do is just press enter.

NPM is like a whole universe. You don’t wanna deal with it bit by bit. Let NPM IntelliSense do the job for you.

VS Code Icons

VSCode Icons by VSCode Icons Team

Using icons on the left side of the file name will automatically give you an idea of what that file is instead of technically looking at the extension name — which is why I personally find VS Code Icons extension really helpful.

It's all in the details. Even a slight change like adding an icon into the file while looking at the file structure will automatically give you an idea about the languages and tools the project contains.

If you can see a lot of JS icons then obviously you will be dealing with a lot of JavaScript and at the same time if you see a lot of TS icons then most certainly you gotta prepare yourself for some TypeScript, good luck.

Prettier

Prettier — Code Formatter

Prettier by definition is an opinionated code formatter. It will make a consistent style by parsing your code in a certain format by default by removing and adding white spaces in order to make your code proper and readable.

It's hard to read codes that are messy, and it will be time consuming to even think of formatting or even thinking about organizing them piece by piece.

Having this extension will definitely make your mind at ease so you can focus on what’s important.

Better Comments

Better Comments by Aaron Bond.

Often developers tend to forget things. There can be far too many codes to handle that realistically it's hard to remember everything, especially when handling huge projects across multiple teams.

And so, //Comments are important. They not only remind you of important pieces of information such as documenting what a function does but are also valuable in adding context about a certain block of code that you may want to tell the other developers.

I’ve been maintaining several projects, and trust me those comments saved my life many times.

It’s difficult to understand how other developers think, how they design or construct their codes, sometimes there will be a learning curve or it will take some time, but using comments will make everyone else’s life better.

Need more reasons to use the Better Comments extension?

Thanks for reading.