Visual Studio Code (VS Code) is the most popular text editor for Developers right now and (some might call it IDE), because of its simplicity and the availability of extensive extensions.

In this article, I will list some of the most useful and popular VS Code extensions. Extensions to your Text Editor/IDE are invaluable to speed up your work without reducing the quality of your output. Most of these extensions general-purpose extensions that will definitely make you a more productive developer if you use them properly and often.

So, this first one on the list is pretty useful if you are the type that likes to have your editor to your taste anywhere and anytime, this is a good one for you.

Settings Sync

Settings Sync
Settings Sync

It allows you to sync about everything you customize on VSCode to your Github, things from settings to keyboard shortcuts to other VSCode extensions.

With this, you will have access to your preferred IDE from any device you are using, instead of having to go back to the blank VSCode environment on new devices and also having to manually set up everything again.

Bracket Pair Colorizer

Bracket Pair Colorizer
Bracket Pair Colorizer

Bracket Pair Colorizer gives the opening and closing brackets in your code matching colors, which makes it much easier to know which brackets belong to which, instead of having to guess. And this extension is also customizable if you want to have custom characters or add a background color to the active scope too.

Live Server

Live Server
Live Server

Live Server launches a local development server with a live reload feature both for static and dynamic pages. You get to see your changes instantly reflected in the browser every time you save your code. With this in your library, you’ll be much faster at spotting errors, and doing some quick experiments with your code is much easier now. (Web Designer/Developer)

Prettier – Code formatter

Prettier - Code formatter
Prettier – Code formatter

As a developer this a must-have extension for your editor, whether you’re using HTML or JavaScript or their frameworks or library.
This extension saves you a lot of time formatting code. Normally you’ll have to use Tab, Tab… or if you are the type that uses Backspace it’s the same. This ‘pretty’ extension automatically formats your code when you save the file and at the same time also helps to catch errors in your code as it will not format the code (properly) if there are errors for instance a missing bracket or an invalid syntax. It also enforces a consistent style.

Auto Rename Tag

Auto Rename Tag
Auto Rename Tag

Well, the name covers it, this extension automatically renames the closing HTML tag while renaming the starting tag and vice versa.

Auto Close Tag

Auto Close Tag
Auto Close Tag

This is another one, it automatically closes the HTML tag while adding a new HTML tag which helps in avoiding the missing tags issue, if you are the type that don’t close your tag immediately you open them.

Subtle Match Brackets

Subtle Match Brackets
Subtle Match Brackets

With this extension you can easily and quickly find a matching bracket it does this by showing an underline for the matching bracket and by default, it applies a subtle light/dark underline to the bracket next to the cursor and its matching pair.

Duplicate Action

Duplicate Action
Duplicate Action

I’m still wondering myself why VS Code doesn’t come with the ability to right-click a file or folder and duplicate it by default (maybe future releases). Most I’ve found myself needing to duplicate a file for reusing as a template or boilerplate or an entire folder, well as you know currently that’s not straightforward unless you want to copy and paste the file then rename it. Duplicate Action simply adds the Duplicate File or Folder option to the context menu when you right-click a file or folder, this makes creating a new page more productive.

Better Comments

Better Comments
Better Comments

Comments are critical when working as a group or just to help others understand your code and they also help you understand when you look at it a year down the road.

I guess we’ve covered why comments are helpful, but as you know they can be hard to read sometimes, as they’re usually all one gray or green color that doesn’t necessarily stand out. This is where Better Comments comes in my friend, it adds a kind of syntax highlighting to the comments, by adding color to keywords and the statements that helps the readability of your code comments properly.

Import Cost

Import Cost
Import Cost

As modern-day developers especially those that work with frameworks, we have to constantly deal with dependencies of different sizes coming from various sources. As the need to get this bunch of different code to build our project arises well it’s also good to know that it comes with additional cost. So, Import Cost will calculate an estimate of the size of an import and allowing us to see how much of an additional weight we would be adding to our project size with the added dependency.

This will helps us to recognize the size of our imported dependencies and preventing accidental overload of huge libraries that could in turn impact the performance of our application and hurt our customers or user experience.

Polacode

Polacode
Polacode

If you like to show off your code on the internet or just get a feed on a particular block this is an awesome extension to have. You can use it to take a screenshot of your code easily and perfectly. It’s simple to use, and the output also looks great.

Live Share

Live Share
Live Share

Live Share allows you and your teammates to share and edit projects in real-time. Similar to Google Docs’ collaboration feature. And it’s also good for debugging when you someone’s help.

Prettify JSON

Prettify JSON
Prettify JSON

If you work with lots of JSON data and quickly need to format your JSON data then you can create a .json file with the JSON data inside it and from the VS Code command palette press Ctrl+Shift+P or Cmd+Shift+P (Mac) and type Prettify JSON to format the contents of the file, voila!.

Markdown All in One

Markdown All in One
Markdown All in One

This extension makes working with markdown very easy and efficient, it provides shortcut commands to be used in your markdown(.md) files like just selecting the text and pressing Ctrl+B or Cmd+B (Mac) to make the text bold. It also allows us to easily preview the markdown files.

Material Icon Theme

Material Icon Theme
Material Icon Theme

This extension is packed with lots of material icons for your files, very beautiful and colorized appropriately. Just check it out and see for yourself.


In conclusion, the list is inexhaustible I’ve only decided to show 15 out of them and notice that I tried as much as possible to showcase the general ones not language-specific, if you want the list for the language-specific extensions like when working with Laravel leave a comment below.

Thank you and don’t forget to subscribe and share.

Leave a Reply