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.
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
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
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
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)
- TypeScript (.ts)
- TypeScript React (.tsx)
Code name: xabikos.reactsnippets
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
Code name: planbcoding.vscode-react-refactor
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
If you want to learn types of components you can learn here.