Essential Visual Studio Code extensions Every Developer Should Have
Programming

Essential Visual Studio Code extensions Every Developer Should Have

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

Visual Studio Code is undoubtfully one of the best code editors for developers. What makes VS Code different from other editors is the availability of numerous feature-rich extensions. These extensions allow you to customize the look and feel of the editor, add a bunch of features and support for different programming languages.

In this post, I am listing some of the best Visual Studio Code extensions for developers. I'll be adding more extensions to the list over the next few days.

For all  developers

1. Bracket Pair Colorizer

Bracket Pair Colorizer

This is one of my favorite VS Code extension. As the name indicates, this extension styles the bracket pairs with different colors. It also automatically highlights the pair of the selected bracket. This useful when dealing with nested statements and large code files.

One of the main advantages of this extension is that it allows you to completely customize the colors and styles used to indicate matching bracket pairs.

2. Better comments

Better Comments

If you write comments for your code, this extension is for you. With this extension, you’ll be able to categorize the comments as:

  • Alerts
  • Queries
  • TODOs
  • Highlights

At the time of writing this post, this extension supports about 70 languages.

3. Settings Sync

Settings Sync is a great extension that will help you to sync your VS Code settings, extensions, and other customizations to multiple machines of VS Code installations using Github Gist.

For developers like me who use office desktop and Personal Laptop for coding, this extension is a real time saver. It automatically keeps multiple VS Code installations synced eliminating the need for a manual setup.

4. VSCode Icons

VS Code Icons

Do you want to replace the default VS Code icons with more understandable and attractive icons? If your answer is yes, VSCode Icons is the extension you need. This extension has icons for virtually every file extensions and languages you can work with using VS Code.

5. Material Icon Theme

This extension is similar to VSCode icons. The extension has been downloaded more than 16.16 million times at the time of writing this post. It is a great alternative to VSCode Icons.

6. Path Intellisense

Path Intellisence is a must-have extension for developers who uses different languages and frameworks for development. This extension will save your time by auto-completing filenames and paths in the code.

For Web Developers

1. Image Preview

Image Preview

What if you can preview the images referred to in an HTML or CSS file on the same line? That would be a great feature. Well, that’s what the Image Preview extension does. It allows you to preview the images referred to in your HTML or CSS code by hovering your mouse over it.

2. JQuery Code Snippets

The JQuery Code Snippets extension is for web developers who use JQuery. You can now write JQuery code faster than ever before with more than 100 snippets offered by this extension.

3. Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Beautify

Not everyone will use Bootstrap and Font awesome. But if you are among the ones who use Bootstrap or Font Awesome, give this extension a try. It contains hundreds of Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro snippets.

I’ve been using this extension for the past few years and it helps me to easily write Bootstrap code that is difficult to remember.

An alternative to this extension is Icon Fonts. But it does not have Bootstrap snippets.

4. Beautify

Beautify

Beautify is another VS Code extension used to format JavaScript, HTML, CSS, JSON, and SASS code.

5. Prettier

This extension is similar to Beautify. This extension can be used to format various languages and frameworks such as JavaScript, TypeScript, Flow, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, and YAML.

6. Live Server

Beautify

Want to create a local server to serve static files and HTML pages? Then, Live Server by Ritwick Dey is the extension you are looking for. After installing the extension, a go-live button appears on the right side of your taskbar. You can create a live server by clicking the go-live button. This plugin will automatically refresh the served pages whenever you make any changes in the code.