VS Code: 6 Extensions you absolutely need in 2021 as a React Developer

We are going take a quick look at some of the best extensions available in Visual Studio Code and why you should absolutely be using them to supercharge your daily coding activities.

In case you’ve been living under a rock for the past 6 years, Visual Studio Code is an industry leading source code editor for Windows, Linux and Mac OS. It offers us a great hybrid between a text editor (such as Atom) and a full-on IDE (such as Visual Studio). It’s lightweight, fast and best of all completely free across all platforms. I myself switched (along with most other JavaScript developers) to VS Code from Sublime Text back in 2016 and have personally never looked back.

Without further ado, let’s talk extensions for 2021!

1 Prettier:

The first extension on this list and the one you have almost certainly heard of before is Prettier. Prettier offers us an, opinionated out of the box, fully customisable code formatter. You can set it up in minutes to auto-format your code when you click save, shaving hours off your development time.

2 Bracket Pair Colorizer:

Have you ever spent hours trying to work out an error, only to find out later that it was because you had missed one of these bad boys “({[“ ? Enter Bracket Pair Colorizer to save the day! This extension allows matching opening and closing brackets to be identified with colours, so you can spot those pesky missing brackets. You can define both which characters to match, and which colours to use. Trust me, you’ll never miss a bracket again ;)

3 ES7 React Snippets (dsznajder):

If you are a React developer who users Redux, then it’s very likely that you know about the pains of writing out lines and lines of boiler plate code. JavaScript and React/Redux snippets in ES7 helps to reduce the time you take to write code by providing some fast and furious shortcuts for the most common syntax. Need a React functional component? No problem! It’s just a case of typing out 4 letters “rafce” and hitting the enter key. You also get a handy Babel plugin features for VS Code.

4 Tabnine:

Tabnine is a GPT-2 based code completion tool powered by machine learning, that can honestly help to save you hundreds of hours in development time (think snippets on steroids!) Tabnine utilises common code semantics, from critical open source projects, to provide fast auto-complete suggestions. Tabnine is free and works on a number of IDEs for most modern programming languages.

5 Live Share:

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.

6 GitLens:

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.