Top 5 React extensions for VS Code.

Veronika Dodda
3 min readJan 31, 2021

In this week's blog, I’d like to talk about the most used Top 5 React.js extensions.

1. Live Share.

Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of 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.

Additionally, unlike traditional pair programming, Visual Studio Live Share allows developers to work together, while retaining their personal editor preferences (e.g. theme, keybindings), as well as having their own cursor. This allows you to seamlessly transition between following one another and being able to explore ideas/tasks on your own. In practice, this ability to work together and independently provides a collaboration experience that is potentially more natural for many common use cases.

2. Live Server

This extension allows the launching of a local development server with live reload feature for static & dynamic pages.

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

This extension provides you with JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

4. ESLint.

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won’t experience errors introduced by traditional find-and-replace algorithms.

Preprocess code, use custom parsers, and write your own rules that work alongside ESLint’s built-in rules. You can customize ESLint to work exactly the way you need it for your project.

5. Bracket Pair Colorizer.

This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.

To download extensions, simply open VS Code, navigate to Extensions, type the extension name in the search bar, and click “download”.

--

--