Zoom Webinar: Learn and enhance your TypeScript skills | 28th March 2023 | 10 AM PST [10:30 PM IST] Register here
Education

Top 10 best VSCode extensions for React js

logo

DhiWise

August 2, 2022
image
Author
logo

DhiWise

{
August 2, 2022
}

If you are a React.js developer using VSCode as your primary code editor, you will probably like to take the advantage of the VSCode extensions. In this article, we will cover the top 10 most helpful VSCode extensions to speed up your React.js app development process.  

Top 10 VSCode extensions for React.js developers

Here is the list of top 10 VSCode extensions for React.js users

  1. Prettier 
  2. ES7 React/Redux/GraphQL/React-Native snippets extension
  3. GitLens
  4. GitHistory
  5. ESLint
  6. Auto Rename Tag
  7. VSCode React Refactor
  8. Better comments
  9. Material icons
  10. npm Intellisense 

Let’s look into each of them one by one.

1. Prettier: Code Formatter

Prettier is an opinionated code formatter that comes in handy for automatically formatting code. It enforces consistent style by parsing your code and reprinting it with its rules that take the maximum line into account and wraps the code if necessary. This way it saves time as there is no need for manual code formatting.

code-formatter

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

The extension is used by both React and React-Native developers. It comes with lots of shorthand prefixes that you can easily use to make your development faster. It provides you JavaScript and React/Redux snippets in the ES7 with Babel plugin features for VSCode.

e7-react

3. GitLens

GitLens gives you the ability to view the code authorship at 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. 

You can trace the history and the evolution of the codebase and by whom, why, and how the code evolved over time. 

git-leans

4. Git History

The extension allows you to view git log, and file history and compare branches or commits. To view the Git history you need to open the file and then press F1 and select/type “Git: View History”, “Git: View File History” or “Git: View Line History”.

git-history

5. 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 the errors and warnings automatically.  

It uses the ESLint library installed in the opened workspace folder. To install it locally or globally run npm install eslint (for local install)  or npm install -g eslint (for global install) in the workspace folder.

eslint

6. Auto Rename Tag

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

auto-rename-tag

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

Moreover, with it, you can handle key attributes and function bindings. It has good compatibility with the React Hooks API.

react-refactor

8. Better Comments

The extension helps you to create more human-friendly comments in your code. It enables you to categorize your annotation into:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • Commented-out code can also be styled to make it clear the code shouldn't be there.
  • Any other comment styles you'd like can be specified in the settings.

better-comments

9. Material icons

 The extension lets you insert Google's Material Design Icons into your HTML code. The sidebar library allows you to:

  • Place  icons in a file
  • Change existing icons
  • Search icons by name
  • Copy svgs directly to the clipboard
  • Add to your Bookmarks for quick access
  • Download the latest pack of icons from Google's repository

material-icons

10. npm Intellisense 

This provides autocomplete for npm modules in import statements. All the imports for npm modules get automatically handled with this extension. 

npm-intellisense

Conclusion: 

Well, we have seen the top 10 best VSCode extensions for React.js developers. Hope this article helps you to find the VSCode extensions you are looking for.  

But wait, there is something more that can reduce your app development time to a great extent. 

Meet DhiWise- The only ProCode/LowCode platform for web and mobile app developers. Now eliminates the grunt tasks in app development with DhiWise and improves your overall development productivity like never before. 

The platform supports web application development with its React web app builder

Try DhiWise and build your React app in days instead of months.