trends

Best 5 Vscode extensions for react developer in 2020.

Best 5 Vscode extensions for React Developers in 2020:

In this article, we are going to learn about the best 5 visual studio code (vscode) extensions for react developers. I personally use these extensions to react projects and I strongly recommend to use too. By using these tools, it will definitely increase your productivity.

EsLint:

This is one of the most recommended extensions for react developers as it statically analyzes your code to quickly find problems. Following are the advantages of using EsLint:

Find Problems:

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Fix Automatically:

Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won’t experience errors introduced by traditional find-and-replace algorithms.

Customize:

Preprocess code, use custom parsers, and write your own rules that work alongside ESLint’s built-in rules. You can customize ESLint to work exactly the way you need it for your project.

Open native terminal:

Traveling through different directory using cd command is too much. This little extension helps you to open your native terminal right from vs code current workspace directory. You can open a native terminal with any path, just click the right button on your mouse, then select an option called Open in native terminal (current folder) or Open in native terminal (root folder).

React PropTypes Generate:

As your app grows, you can catch a lot of bugs with type checking. For some applications, you can use JavaScript extensions like Flow or TypeScript to type-check your whole application. But even if you don’t use those, React has some built-in type checking abilities. To run type checking on the props for a component, you can assign the special propTypes property.

This is the VS Code’s extension that automatically generates PropTypes code for React components, like ReactPropTypes in the Jetbrains’ Platform. Adding prop types manually takes so much time. This extension will automate the generating propTypes and you just need to click on the component and then click ctrl + shift + alt + p.

Reactjs code snippets:

Whenever we created a new file we manually add the component skeleton and our component can be a class, functional, hooks based, redux based, and many more. This extension can create all those snippets with just a few keys. It contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package. This extension has around 50 different snippets.

Supported languages (file extensions)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)

React Refactor:

This simple extension provides refactor code actions for React developers.

Recompose your overgrown JSX without worrying about the given data. This extension will do the dirty work for you without breaking your code.

Features:

-Extract JSX element to file or function
-Supports TypeScript and TSX
-Works with classes, functions and arrow functions
-Handles key attribute and function bindings
-Works well with new Hooks API

Bonus

Turbo Console Log
Adding console on multiple areas is time-consuming. To solve this problem I use the Turbo console log which basically creates console with shortcut and plus point here is that this extension also adds useful info like functions name and variable name in the console.

The ES7 React/Redux/GraphQL/React-Native Snippets Extension:

This snippets extension (I won’t type the entire name out again) is incredibly popular with over 2 million downloads. To back this up, every big-time developer I’ve heard talk about React on a podcast, YouTube video, etc. uses this extension and loves it.

I’ve always said that developers are “intentionally lazy”. In other words, we find ways to constantly improve the speed at which we right code by writing less of it ourselves. These snippets making writing React much much faster!

Also, read this post :

How to Build Sign Up and Login Forms using HTML5 and CSS3 in 2020?

Leave a comment

Your email address will not be published. Required fields are marked *