5 vscode extensions for react developers

In this post we are going to learn about 5 vscode extensions for react developers that they must use. I personally uses these five extensions in day to day life. Which automatically increases productivity.

ESLint
This is the life saving extension for producing greater quality code. It basically integrates ESLint into VS Code. If you are new to ESLint check the documentation.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

Code name: dbaeumer.vscode-eslint
Downloads: 7,515,220

Open native terminal
Travelling 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 native terminal with any path, just click right button on your mouse, then select option called Open in native terminal (current folder) or Open in native terminal (root folder)

Code name: alexeyvax.vscode-open-native-terminal
Downloads: 3,386

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

Code name: suming.react-proptypes-generate
Downloads: 3,512

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 few keys. It contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package. This extension have around 50 different snippets.

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Code name: xabikos.reactsnippets
Downloads: 475,575

VSCode 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
Code name: planbcoding.vscode-react-refactor
Downloads: 12,978

Bonus

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

Code name: chakrounanas.turbo-console-log
Downloads: 91,835

If you want to learn types of components you can learn here.

BlogReact