VS Code Extensions You Should Use As a React Developer
Tags: webdev, javascript, react, beginners
Published: 2022-12-17 02:12:24

With the rise of new tools and technologies, developers can now build websites, apps, and other digital solutions faster than ever. These technologies have also made it easier for developers to collaborate on projects and share code with one another.

Hunting down the right extensions has become a bit of a game in the world of code editors. Each editor is different but they all have their own set of extensions that will boost your coding experience. The VS Code editor is one example that comes with its own list of useful extensions.

If you’re a React developer using VS Code as your primary code editor, you’ll probably want to take advantage of these extensions to get the most out of your coding experience.

Let’s take a look at some of the most helpful VS Code extensions for React developers.

## ES7 React/Redux/GraphQL/React-Native snippets


![ES7 React/Redux/GraphQL/React-Native snippets Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoxlb7rz6gzkx906xfr5.jpg)
[ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) is one of the most popular extensions that is not only used by React developers, but also by React-Native developers. It comes with a lot of shorthand prefixes you can easily use to speed up your development process.

This extension provides a lot of snippets you may not know about. Once you have installed this amazing extension, 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.

![React functional component image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m942g0szndpv3bwprrb.jpg)

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

Moreover, if you are using Redux or GraphQL, this extension also provides snippets for them too.

## VSCode React Refactor

![VSCode React Refactor Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa1etaf6lasubpmsjxgf.jpg)
Simple, but very useful.[VSCode React Refactor](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor) allows you to extract JSX code parts to a new component, file, etc. Works with classes, functions, and arrow functions and supports TypeScript and TSX.

## Prettier

![Image Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tddr5birva6pja6ygoa.jpg)
After years of using Prettier, I think it is a handy extension for any project. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a tool that automatically formats code for you. It helps a lot with keeping the codebase consistent, as no matter what personal preferences developers on the team might have, code will be formatted in the same way for all of them. Besides consistency perks, it also saves time, as there is no need to manually format code or even think about how it should be formatted. That’s why I strongly recommend using prettier as a code formatter.

## Eslint

![Image Eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l039819s4qx6ngf0e8i.jpg)
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) is a popular extension used to find errors and bugs in the code. It helps a developer write a better code without errors and warnings because it points out where the possible error or waring can occur.

Moreover, it can fix the errors and warnings automatically. If you want to learn more about ESLint, you can always visit its [documentation](https://eslint.org/docs/latest/).

## Stylelint

![Image Stylelint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufskyyg4id7ets3rcjnt.jpg)
[Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint), similarly to ESLint, is also a linter, but for styles. It can detect and highlight incorrect styles and helps with keeping styles consistent and in order. What’s more, it works with pure CSS as well as pre-processors like SCSS and LESS.

## GitLens

![GitLens description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wmh3we9qrykvxari4mo.jpg)
[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) supercharges the Git capabilities built into Visual Studio Code. It helps you 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 more.

## Git History

![Image Git History](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzsboqxicv3bs8f0n7p1.jpg)
[This extension](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) allows you to view git log, and file history, and compare branches or commits.

## Settings sync

![Image Settings sync](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iphz26rbvb85pnuzcijf.jpg)
Have you ever reinstalled your OS or changed the device on which you write code, proceeded to install the VS Code, and then realized that you need to reinstall all your extensions? Well, the only extension you need to reinstall is this one — [settings sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync). It can automatically save your extensions and VS Code settings and then install and configure these on another device.

## Bracket Pair Colorization Toggler

![Image Bracket Pair Colorization Toggler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xw0embc8ohxzmaw54fq.jpg)
Very simple but useful extension. [It](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler) highlights matching pairs of brackets.

## Auto Close Tag

![Image Auto Close Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yda8pr1303sn1kdzwoz8.jpg)
[This](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) is a simple but one of the most useful extensions for React. What it does is a very simple thing. Auto close tag, as the name suggests, creates a closing tag for an element, meaning a developer does not need to write the closing tag. This might seem simple but in reality, an automatic closing tag is very helpful.

## Auto Rename Tag

![Image Auto Close Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kjq4bz8u1ccgxgk2w9t.jpg)
[Automatically](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) renames paired HTML/XML tags.

## Auto Import

![Image Auto Import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy56itc3bb5jvecscf2v.jpg)
[Automatically](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport) finds, parses, and provides code actions and code completion for all available imports. Works with TypeScript and TSX.

## Import Cost

![Image Import Cost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wxw0io8difxgthdan5c.jpg)
In React, installing and importing packages is very common and necessary. Importing lots of packages can cause performance issues because some of these packages can be heavy. The [Import cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) extension displays the size of the packages in the editor.

## Jumpy

![Image Jumpy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp8cldekpyxyesyz1o8j.jpg)
How do you usually go from one line of code to a specific keyword that is a few lines and spaces away? By using keyboard arrows multiple times or with a mouse click? With [Jumpy](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy), you can be much more efficient, as it allows you to jump to a specific word quickly.

## i18n Ally

![Image i18n Ally](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmqx39hkds4lbeoytb1p.jpg)
[Great extension](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) if your application has support for multiple languages.

## Formatting toggle

![Image Formatting toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhhj774y6xeapll2tomq.jpg)
There are cases in which we would want to disable a code formatter like Prettier temporarily. This can be done with [Formatting toggle](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle) extension, without the need to modify editor settings.

## Npm intellisense

![Image Npm intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75wl3nmlkporzfsnxl6g.jpg)
[This](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) provides autocomplete for npm modules in import statements.

## Web Accessibility

![Image Web Accessibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3lni8zqwdh4ngwyk1rm.jpg)
Great plugin for improving accessibility of your web applications. It highlights elements that you should consider changing and also provides tips on how they should be updated.

## Live Share

![Image Live Share](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74okun8atu01lphpjo7c.jpg)
Would you like to collaborate with someone else on your code? [This extension](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) enables you to edit and debug code with others in real-time.

## Better comments

![Image Better comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odj7yo1a5sntmhkl4x57.jpg)
[Great plugin](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) for creating more human-friendly comments in your code. It can categorize comments into alerts, queries, to-do’s, and highlights and shows them in different colors.

## Docker

![Image Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/patpizcxw2hs6gu823em.jpg)
If your application is deployed using Docker, you might consider using [this extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) to make it easy to build, manage, and deploy containerised applications from VS Code.

## Remote — SSH

![Image Remote — SSH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk6amn6yubsmio7uen68.jpg)
Do you need to access a server to edit files remotely? [Remote SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) will let you use any remote machine with an SSH server as your development environment. You can easily swap between remote and local development environments.

## WSL

![Image  WSL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kd4n337eomix1ba0tn7.jpg)
If you prefer to develop your application on Linux, but your main OS is Windows, you might consider using Windows Subsystem Linux (WSL). If you do, then you might find “[WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)” extension useful, as it lets you use Vs Code on Windows to build Linux applications. You get all the productivity of Windows while developing with Linux-based tools, runtimes, and utilities.

## Live Server

![Image Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzaylae1618ndvty1agf.jpg)
Great [extension ](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)if you need to quickly start a live server with live browser reload on file changes.

## Debugger for Chrome and Debugger for Firefox

![Image Debugger for Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hqzk58hdihl2syoctg5.jpg)
A debugger provides a lot of useful functionality, such as pausing code execution at breakpoints, variable inspection, and more. These extensions provide debugging functionality inside of the VS Code editor.

## Change-case

![Image Change-case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeoqoevy2a6d646ht1ir.jpg)
As the name suggests,[ this extension](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) allows you to change the casing of the current selection or current word. It’s quite useful if you have a very long text or want to convert multiple variables to the same casing.

## Regex Previewer

![Image Regex Previewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pr4eesyhl5bpj0afhhll.jpg)
Most developers rarely write Regex expressions. However, if you have to, the [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) extension might be quite handy. It shows the current regular expression’s matches in a side-by-side document.

## DotENV

![Image DotENV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19cpgt5rvygiysu87qi8.jpg)
Syntax highlighting for _.env_ files.

## Conclusion
So these are Useful vs code extensions for React developers. Hope this post helps you with finding some best extensions for your React application development. These extensions can increase your productivity and get the most out of your coding experience. Let us know if there are other extensions that you use in your daily life for React development. We love to use them as well.

**THANK YOU FOR READING** 
I hope you found this little article helpful.  Please share it with your friends and colleagues. Sharing is caring.

Connect with me on [various platforms](https://bio.link/thomassentre)