Best VS Code Extensions for Developers

Ammaar Aslam's photo
Ammaar Aslam
·May 14, 2022·

5 min read

Best VS Code Extensions for Developers

Photo by Clément Hélardot on Unsplash

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • 1. Visual Studio IntelliCode
  • 2. Path IntelliSense
  • 3. Markdown All in One
  • 4. Prettier
  • 5. Auto Rename Tag
  • 6. Colorize
  • 7. GitLens
  • 8. Polacode
  • 9. Themes
  • 10. Icons

👋 Hello and welcome!! I'm Ammaar Aslam, a self-taught programmer/developer. This is my first article on Hashnode and in this article I would like to share my favourite VS Code extensions I use. Hope you all enjoy it, let me know your feedback about my writing. So without further ado, let's dive in.

VS Code is one of the most widely used and loved IDE, developers all around the world use to build software. Whether you're a beginner who is writing basic HTML or professional building desktop applications, chances are you might be one of the many developers who use VS Code.

There are thousands of contributors who create useful extensions to give the already powerful VS Code, superpowers. These extensions can be useful in many ways, from being productive, to add additional functionalities to VS Code, to even change the look and feel of it.

Here is my recommended list of the best extensions for VS Code. (Listed in no particular order)

Note: I have only included "general purpose extensions" that can be used for most types of workflows. In the future I'm hoping to post language specific extensions that I use, so stay tuned for that.😊

1. Visual Studio IntelliCode

Visual Studio IntelliCode is an AI-powered productivity tool built by Microsoft for VS Code as an enhancement for the existing IntelliSense. It provides contextual code completion/autocompletions for VS Code. IntelliCode's recommendations are based on practices developed in thousands of high quality, open-source projects on GitHub each with high star ratings and it's machine learning model is constantly learning through these open-source projects to provide "context-based" code completions rather than an alphabetical or recently used list. This saves you a lot of time as you will not need to cycle through a list of suggestions, and instead the most relevant one will be at the top. I have been using this extension for a long time and has saved me lot of time. I would definitely recommend you check this one out.

intellicode-demo-min.gif

Visual Studio IntelliCode Demo

2. Path IntelliSense

This is a similar extension to the previous one, that provides autocompletion functionality for filenames. This could be very handy if your workflow requires you to import a lot of in-project files.

path-intellisense-demo.gif

Path IntelliSense Demo

3. Markdown All in One

Writing documentation is an important part in a developer's workflow. And the most common way of writing documentations or even articles/blogs, is using Markdown. The Markdown All in One extension makes the process of writing in markdown more enjoyable and productive, by providing keyboard shortcuts, TOC, autocompletions and many more.

4. Prettier

Prettier is an opinionated code formatter that enforces a consistent style throughout a project. This is especially useful if there are multiple people working on a single project and want a consistent style to your code.

prettier-demo-css-min.gif

Prettier CSS Demo

prettier-demo-react-min.gif

Prettier React Demo

Quick Tip: Enable Format on Save. This feature in VS Code formats a file after you save it, with a code formatter. You can do this by opening the settings (Ctrl + ,) and then search for Format on Save and check the box in front of it and make sure to set Format on Save mode to file.

5. Auto Rename Tag

This extension does exactly what it says in it's name, it automatically renames paired tags. This is a very simple, yet very useful extension.

auto-rename-tag-extension-demo.gif

Auto Rename Tags Extension Demo

6. Colorize

This is an extension that can be used to visualize colors in VS Code. It can be used for cross browser colors (red, green, blue), hexa, rgba or even argb.

colorize-demo-css.gif

Colorize CSS Demo

colorize-demo-css-in-js.gif

Colorize CSS-in-JavaScript (Styled-Components) Demo

Note:-If you want to add colorize to other languages, you just have to include it in your settings.json file. For example: colorize-settings.png

7. GitLens

GitLens is a feature-rich extension for VS Code that allows you to manage git in a whole new level. GitLens is a great tool for understanding every line of code, you can know who, when or why it was changed. It also allows you to jump through the history of the entire codebase or even check the history based on commits.

GitLens has so many other cool features, going over them would need a separate article. So for now take a look at their documentation to grok all the features. If you are a person using git for source control, this would be a very handy tool for you.

8. Polacode

Polacode is an extension that creates beautiful pictures of your code that can be shared easily with others. The best thing about Polacode is that when creating the picture, it retains the existing theme, fonts and renders them in an awesome way.

polacode-demo-min.gif

Polacode Demo

9. Themes

You can also change the look and feel of VS Code with extensions. It can be overwhelming to pick from the massive amount of themes to choose, so here are my favourites:

10. Icons

You can also change the default icons. It is the same thing with icons, a lot to choose from, so here are my picks:

 
Share this