Top 10 VS Code Extensions for React Developers
Tags: react, vscode, programming, javascript
Published: 2023-06-16 04:31:00

### 1. Path Intellisense 

[Link](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onu36d6pu40b9x5nhteu.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zq78wwemug8lcy7uxxg7.gif)

---

### 2. React 18 Snippets 

[Link](https://marketplace.visualstudio.com/items?itemName=KristiyanVelkov.react-18-snippets)

A VS Code extension with React 18 snippets for functional components. React 18 snippets comes with a lot of shorthand prefixes you can easily use to speed up your development process.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idi52ccyq58oismyfivh.gif)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yplcbjz4v9nlv01lsoa.png)


---

### 3. Prettier

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

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r559yh2d9aex950lilgq.png)



---

### 4. ESLint

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

ESLint is used to find errors and bugs in the code. It statically analyzes the code to quickly find the problem and thus helps developers to code better with no errors and warnings. Also, it can fix errors and warnings automatically.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kytd7n0lyuej8wuoc4rk.png)


---

### 5. Auto Rename Tag

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

Automatically renames paired HTML/XML tags the same as Visual Studio IDE does.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8twor52ui7tce7x4p0w.png)


---
### 6. GitLens

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

GitLens gives you the ability to view the code authorship at a glance via Git blame annotation and CodeLens, navigate and explore code repositories, and give valuable insights through rich visualization and powerful comparison commands, and more.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iptjli91k6d4wvandxa6.png)


---

### 7. VSCode React Refactor

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

It is a simple yet highly useful extension that allows developers to extract JSX code parts to a new file, class or functional component, etc. It supports Typescripts and TSX and works with classes, functions, and arrow functions. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzba2m29ryu927rzan57.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaynyzqr9t9xqysy84hp.gif)

---
### 8. Better Comments

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

The Better Comments extension will help you create more human-friendly comments in your code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9hon9omnjhazwf680bp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbomwmwq2ycktv8sxqeg.png)


---

### 9. Tailwind CSS IntelliSense

[Link](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/671ma5meawrxy2vuxh6w.png)



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.

---

### 10. ES7+ React/Redux/React-Native snippets

[Link](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

Provides many shorthand prefixes to accelerate development and help developers create code snippets and syntax for React, Redux, GraphQL, and React Native. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6s61aq2wqwxa4c5rdfg.png)


---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2zcidciydse9dofz4fs.png)


[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)

<a href="https://revolut.me/kristiyanvelkov" target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmsw2d2ooukhdg8x5ar.png)
</a>

If you like my work and want to support me to work hard, please donate via:

<a href="https://revolut.me/kristiyanvelkov" title="Link to Revolut">Revolut website payment</a> or use the QR code above.                                                                                                                           


**Thanks a bunch for supporting me! It means a LOT 😍**