5 vscode extensions for react developers
Blog React 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.

Categories: Reactjs

6 Comments

5 things that every React beginner should know - Blog React · February 5, 2020 at 4:19 am

[…] Eslint provides a way to auto fix eslint issues on saving of your files. Apart from them you can also use eslint extension for vscode. I have write an article on top 5 vscode extensions for React developers. You can read that here. […]

5 React best practices to follow in 2020 - Blog React · February 7, 2020 at 3:53 am

[…] You can checkout best vscode extensions for react developers here. […]

Must have browser Extensions for React Developers - Blog React · February 18, 2020 at 3:46 am

[…] Checkout 5 vscode extensions for react developers here. […]

Best way to improve your React code - Blog React · February 22, 2020 at 3:46 am

[…] 5 vscode extensions for react developers […]

A roadmap from beginner to advanced for React developers 2020 - Blog React · March 7, 2020 at 4:18 am

[…] Vs code extensions […]

How to write React like a pro - Blog React · March 9, 2020 at 3:29 am

[…] Do you need more extensions like above checkout this article. […]

Comments are closed.