Visual Studio Code has grown over the years to become the best and most popular text editor for java, app, and web developers. With more than 14 million users worldwide, Visual Studio Code is unarguably the default text editor for developers.

Most developers underutilize VS Code because Visual Studio Code comes fully functional out of the box. This can be considered plug-and-play that is you can download VS Code and start building apps and APIs.

There are a few things you can do with the free plugins of Visual Studio Code to help enhance your workflow which can directly increase your productivity.

Am going to reveal the Top 10 Best Visual Studio Code Extensions that can improve your productivity. Also at the end, I will include some bonus VS Code Extensions you can add to your workflow.

One of the series tutorials, 25 VS Code Tips and Speed Tricks for Productivity, covers 25 Visual Studio Code Tips and Tricks Developers Must Adopt to Become Productive.

These popular VS Code extensions apply to JavaScript and ReactJS developers, but there are some general-purpose VS Code extensions that will benefit everyone else.

Top 10 Best VS Code Extensions for developers
Top 10 Best React.js VS Code Extensions

Here are the Top 10 Visual Studio Code Extensions we will cover

You can also read:

Next.js Full-Stack App with React Q...
Next.js Full-Stack App with React Query, and GraphQL-CodeGen

1 – GitLens

Gitlens vs code extension
GitLens

GitLens supercharge the Git capabilities built into Visual Studio Code. The most amazing feature of GitLens is the Toggle File Blame which allows you to see who, why, how, and when different git changes have been committed.

The Toggle File Blame feature is very helpful when you are working in a team, when you hover over a line of code, you can actually see who made changes to that line of code when they committed the change and even the commit message.

gitlens popup

To do a dev check, hover over the line of code then click on the open changes from the pop-up that shows and you will be taken to VS Code difference tool where you can see the different changes that happened to the lines of code.

git source code control difference tool
Git Source Control Difference Tool

GitLens comes with a lot of cool features and it is highly customizable, you can turn off a particular feature you don’t like in settings.

2 – Tailwind CSS IntelliSense

tailwind css
Tailwind CSS IntelliSense

Tailwind CSS is an amazing tool a lot of developers have included in their stack because of the powerful utility classes that can help speed up your development.

One drawback is when you start using Tailwind at a particular point you may forget some of the utility classes.

I can’t write this top 10 VS Code Extensions article without including Tailwind CSS IntelliSense because I now feel happy when using Tailwind CSS in my projects since this plugin offers amazing utility class suggestions.

tailwind css intelliSense suggestion

With this plugin, when you start writing a utility class, you’ll immediately get the utility class suggestion from which you can choose the particular class you want.

tailwind css intelliSense class

Another amazing thing is when you hover over a particular Tailwind Utility class, you will see a popup of the actual CSS that will be applied.

3 – ES7 React/Redux/GraphQL/React-Native snippets

es7 reactjs snippets
ES7 React Snippets

ES7 React, Redux, GraphQL, React-Native snippets VSCode Extension comes with a lot of shorthand prefixes you can easily use to speed up your development process.

es7 reactjs graphql react native snippets

This plugin provides a lot of snippets you may not know about. Once you have installed this amazing plugin, create a new file and type rfce then press enter and this will generate a React functional component, import React and also export the component.

rfce Functional Component

es7 reactjs graphql react snippets functional component

rcc Class Component

es7 reactjs graphql react snippets class component

This plugin allows you to create different es7 snippets within seconds by just typing the prefix shorthand and pressing enter.

4 – GitHub Copilot

vs code extension for vuejs developers github copilot

GitHub Copilot is an AI pair programmer that provides you with predictable code suggestions to help you code faster and more efficiently. GitHub Copilot is powered by OpenAI GPT-3, a new advanced AI system (Codex) designed around autoregressive models to generate human-like text.

Copilot is an end product of the collaboration between GitHub and Open API and it’s heavily backed by Microsoft, the company behind VS Code.

The AI itself was trained with billions of lines of code and text from publicly available source codes on GitHub.

Nevertheless, GitHub Copilot is only available as a technical preview, and currently supports Python, Java, Typescript, Ruby, Javascript, and Golang.

Currently, Copilot is available as an IDE extension for Neovim, Visual Studio Code, and JetBrains.

Now, type the following code and you should get some suggestions from GitHub Copilot:


function calculateDaysBetweenDates(startDate: Date, endDate: Date){}

The name of the function suggests that I want to calculate the number of days between two given dates:

github copilot test in vs code

After carefully looking at the suggested code, press Tab to accept it.

github copilot accept suggested code

There are more advanced things you can do with GitHub Copilot but this simple example illustrates powerful it can be.

You can learn more about GitHub Copilot from their official website.

5 – JavaScript (ES6) code snippets

JavaScript es6 Snippets
JavaScript ES6 Snippets

JavaScript ES6 code snippets extension can help you improve your productivity by allowing you to use the predefined ES6 syntax snippets shorthands.

This VS Code plugin can be customized since it is not specific to any framework, you can also download additional plugins(React, React-Native, Redux) that can trigger the JavaScript ES6 Snippet extension snippets from different files.

6 – Code Snap

CodeSnap VS Code extension

CodeSnap is actually a very awesome extension I recently found and I needed it because I wanted to share some code snippets with some friends, students, and teammates.

Usually, I used to take a screenshot of my screen and use a snippet tool to highlight the particular lines of code am interested in but this style is very tedious.

CodeSnap makes it easier to share code snippets by downloading them as a single png. You simply need to use ctrl + shift + P and type CodeSnap then press enter and the CodeSnap window will open.

CodeSnap VS Code
CodeSnap VS Code

Now highlight the code snippets you want and immediately you will see the preview in the CodeSnap window. Click on the CodeSnap logo to download the code snippets image.

7 – Prettier

prettier code formatter
Prettier Code Formatter

Prettier is an opinionated code formatter that integrates well with text editors like VS Code, Atom, Sublime, etc. Its superpower becomes noticeable when you have a team working on the same project because the plugin enforces a particular style through its configuration file.

Prettier has about 18 million downloads which shows how popular and useful it is. What Prettier does is to keep your code nicely formatted so that it enforces a particular style of code.

To make Prettier work seamlessly, you need to toggle on Format On Save from VS Code settings, this will make Prettier use the format command to format your code anytime you save your code.

8 – Live Share

live share vs code
Live Share

This Live Share extension by Microsoft will be probably your best friend in the workplace.

Now, this is an absolute game-changer, what this plugin actually allows you to do is to essential help program in real-time just like in a Google document where you can see individual’s cursors, you can see as the other individuals are typing in your IDE.

The process is simple – you create a session, and other developers can join your session and get full visibility of your IDE and code on their IDE without the need to clone or install anything.

Why is this so powerful? Not only can you start a collaboration session, but you can also go ahead and share your localhost port with someone else then you can share access to your terminal as well.

This means you can code a NextJs app, or a React app, and have full visibility of the other programmer’s IDE which makes it perfect for working with colleagues and teaching students.

9 – Auto Rename Tag

auto rename tags vs code

Am very excited I included Tabine’s AI Auto Rename Tag extension in the Top 10 VS Code Extensions list.

Tabnine is a free powerful Artificial Intelligence assistant designed to help developers code faster, reduce unnecessary mistakes, and discover best coding practices.

I actually got introduced a bit too late because I was typing the opening and closing tags manually for far too long as a developer, you don’t need to do that so make sure you take advantage of it.

What it does is as you are editing a tag like an H1 tag it will go ahead and adjust the closing tag.

10 – VS Code Icons

vs code icons react developer
VS Code Icons

VS Code Icons plugin is more like an aesthetic upgrade, it will make you feel like you have a nicer coding setup. The plugin will go ahead and upgrade the icons in your VS Code settings file.

I highly encourage you to install this VS Code Extension to make your development environment look professional.

After installing and activating the plugin, you will immediately see that all the folders and files will have different icons which make the IDE look amazing.

Bonus Extensions

Below are some important VS Code extensions you’ll need at some point in your development journey.

TODO Highlight

todo highlight vs code extension for vuejs developers

TODO Highlight VS Code Extension is really useful by highlighting certain keywords in code comments like FIXME: , and TODO: .

Todo Highlight

This plugin is very helpful when you are working in many different areas and you don’t want to forget a certain Todo or Fix me now comment.

Another interesting feature is you can use ctrl + shift + P , type Todo Highlight then select List the Highlighted annotations, and choose All to list all the highlighted annotations you left throughout your code.

Import Cost

import cost
Import Cost

Import Cost is an important extension developed by the guys at Wix which actually allows you to see the cost of importing a particular library into your project.

import cost by wix

The plugin shows the size of the imported library and when the color is green then the size is small whilst red indicates that the size is huge.

React Native Tools

react native tools

React Native Tools extension is built by the Microsoft team and it provides a development environment for React Native projects.

The plugin allows you to easily run and debug your code on the different simulators or emulators, quickly run react-native commands from the command palette without running the commands manually in the terminal and use IntelliSense to browse functions, objects, and parameters for React Native APIs.

Path Intellisense

path intellisense vs code

Path Intellisense is an amazing tool that makes it easier to work with file paths in VS Code.

The plugin autocompletes filenames or file paths as you type and this feature can be really useful if you work with lots of node modules or files in your project.

Live Sass Compiler

Live Sass Compiler

Markdown Preview Enhanced

Markdown Preview Enhanced