VS Code is one of the most used code editors for all developers community. According to the Stack Overflow survey of 2021, VS Code is the most used code editor by React developers. Over 47% of total developers use VS Code as their primary code editor.

VS Code also provides access to lot of extensions that can make your life easier. In this article, we will look at 7 VS Code extensions that you must use as a React developer.

1. Prettier

Prettier is an opinionated code formatter. 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.

You can also customize the rules according to your preferences. Prettier is one of the most popular VS Code extensions with over 10 million downloads.

Install from here

2. ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways. It helps you avoid errors and enforce a standardized coding practices in your codebase.

Install from here

3. 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.

Install from here

4. Auto Close Tag

Auto Close Tag is a very useful extension for React developers. It automatically renames paired HTML/XML tags. It also works with JSX tags. When you rename the opening tag, the closing tag is automatically renamed.

This will help you to avoid the tedious task of finding, renaming the closing tag manually.

Install from here

5. Code Runner

Code Runner is a simple extension that allows you to run code snippet or code file for multiple languages including Javascript, Node, Python, C, C++ and many more.

You can directly run you code by clicking on the play button in the editor. No need to save the file and run it from the terminal.

Install from here

6. TODO Highlight

TODO Highlight is a very useful extension for any developers. It helps you to identify the TODOs and FIXMEs in your code. It highlights the TODOs and FIXMEs in different colors, so that you can easily identify them can fix them.

Install from here

7. Pro Tip - Code Snap

Code Snap is a VS Code extension that helps you to take a screenshot of your code. It also allows you to add a custom watermark to the screenshot. You can also add a custom background color to the screenshot.

Code Snap creates a beautiful screenshot of your code which can be easily shared. Here is a screenshot of this article created using Code Snap.

Install from here

Closing Comments 👋

In this article, we looked at 7 VS Code extensions that you must use as a React developer. 👨‍💻

For any questions or suggestions, please feel free to comment below. I would like to read in comments section, which extension you liked the most. 💬

If you find this article useful, share it with your friends and follow me for regular update of my articles. 🔗

Rushi Patel, Signing Off! 😊