4 VS Code Extensions to Improve Developer Experience in React
Learn how to use these 4 VS Code Extensions to greatly improve your React developer experience
I think my favorite part about using React is the community of people around it that continue to push the envelope. This not only extends to people whom are making NPM (Node Package Manager) packages for it, but the community of people making extensions for it in VS Code. VS Code for me has made the React developer experience even better, allowing me to write code faster and more efficiently. That is why I am going to share my 4 favorite extensions for JavaScript/React development that were absolute game changers for me.
If you haven’t given Visual Studio Code a try I highly recommend it. The below link will take you to the download page.
Bracket Pair Colorizer 2
This is not only useful, for React development, but also JavaScript development in general. As you already know JavaScript code can have many-many nested curly braces and parentheses, but thanks to this extension it is now a breeze to find the matching pairs. The screenshot below demonstrates curly braces and parentheses being colorized by this extension.
ES7 React/Redux/GraphQL/React-Native snippets
This has so many snippets. It’s a huge time saver, because it really helps with boiler-plating React components. Not only that, but it also has some really handy snippets for JavaScript.
Prettier
Prettier is by far my favorite extension in vs-code. Basically as its name indicates, its sole purpose is to make your JavaScript code ‘pretty’. Not only does this do a good job at ensuring that your code is formatted in a really nice way, but also it will guarantee consistency in the way your code is written which can be a huge time saver when reading through it.
Here’s a tip
If you go into the VS Code settings and look for something called format on save and enable that what it will do is make sure your code is formatting whenever you save the file.
vscode-styled-components
For those of you who use styled-components in React you will absolutely love this one. It is going to add auto-completion to your styled-components code. I will show you an example below.
Wrap Up
These four extensions that I have shown you today have really helped me to improve the efficiency with which I write React code and I would love to hear some of your favorite React or JavaScript extensions as well.
