10+ Must-have VSCode Extensions for React Developers
Tags: react, javascript, webdev, beginners
Published: 2021-10-22 15:29:18

Extensions in VSCode are one of the things that makes VSCode so special. So let's see some of these extensions that will be of help to you as you work with ReactJS.

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

A simple extension for React and redux snippets.

Installs: 3.7 million+.
[Install here](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

### 2. Prettier

Prettier formats your code. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Prettier has support for JavaScript, TypeScript, JSX.

Installs: 15.9 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### 3. Auto Rename Tag

Because you will always work with tags in React, one must-have extension is auto rename tag.

It automatically renames paired HTML/XML tags, with support for JSX

Installs: 6.8 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

### 4. ESlint

Eslint analyses your code to find problems and provide an automatic fix (most cases).

Installs: 16.8 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### 5. GitLens

GitLens supercharges the Git capabilities built into VSCode.

Quickly glimpse into whom, why, and when a line or code block was changed.

Installs: 11.2 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

### 6. Vscode-styled-components

Vscode styled-components is a must-have extension for working with styled-components in react.

It provides CSS syntax highlighting and IntelliSense in styled-components.

Installs: 950k+

[Install here](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)

### 7. Typescript React code snippets

Typescript React code snippets provide a good number of snippets for working with typescript and react. Supports for only TSX or ts.

Installs: 176k+

[Install here](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript)

### 8. Better comments

Better comments is a customixable extension that makes your comments human-friendly by categorizing annotations into alerts, todos, information, and so much more.

Installs: 2.2 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

### 9. Git History

Git History helps you easily view git log, file history, compare branches or commits.

Installs: 4.7 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

### 10. Import const

It will display inline in the editor the size of the imported package.

Installs: 1.3 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

### 11. Vscode React refactor

Vscode React refactor recomposes your JSX, TSX. Works with arrow functions.

Installs: 59k+

[Install here](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)

### 12. Turbo console log

It simply automates the process of writing meaningful log messages.

Installs: 325k+

[Install here](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

### 13. Material icons

It styles your file and folder icons. It is customizable.

Installs: 9.5 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

### 14. Code spell checker

This extension is a basic spell checker that works well with camelCase.

Installs: 3.3 million+

[Install here](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

### 15. WakaTime

WakaTime is an open-source extension for metrics, insights, and time tracking automatically generated from your programming activity.

Installs: 519k+

[Install here](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

Alright, that's the end of the list. I believe each one of these extensions can be of great help to you. So enjoy.
Thanks for reading. Leave a comment for me to let me know what you think or if I miss an extension.

Also, follow me on Twitter [@elijahtrillionz](https://twitter.com/elijahtrillionz) for daily tweets on web development resources and tips.