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.
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:
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.
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.
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:
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)
- TypeScript (.ts)
- TypeScript React (.tsx)
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.
-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
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 :