5 Essential VSCode Extensions for React Developers

by Julianne Vela

May 31st, 2022

Everybody has a favorite. Despite what your parents may have told you when you were younger (if they were software developers too, that is). We all have our own unique taste for what tools we like to use during our development, which brings me to this post you're reading. These are the tools that you never knew you needed. In no specific order, here are 5 essential Visual Studio Code extensions for react developers.

To install any of these extensions, you can visit the Visual Studio Marketplace or type the given command into your Command Palette in VSCode. I've included both options below each extension for added convenience. :)


ES7+ React/Redux/React-Native Snippets

When it comes to web developers, our time is our biggest asset. We're always looking for more efficient ways to solve problems and complete our tickets or ship our apps. Any tools that can help us achieve this are a plus, which brings me to my first entry in the list: ES7+ React/Redux/React-Native Snippets.

This extension is a collection of super helpful snippets for common use cases among react developers. How many times a day do you write out a function or class component? Well, this one reduces your keystrokes to only 4-5 instead of having to type out the entire component each time.

Simply type rfce or rafce into your editor and VSCode will auto-magically create the relevant component structure for you. It formats your code and highlights the component name, initial text entry, and export statements so that you can easily rename it to whatever you'd like.

code editor with shortcut command 'rfce' for react function component

HOW TO INSTALL:

Marketplace: ES7+ React/Redux/React-Native snippets

Command Palette: ext install dsznajder.es7-react-js-snippets


htmltagwrap | Auto Rename Tag | Auto Close Tag

This entry is really a group of three separate extensions, but they all work together seamlessly for JavaScript and TypeScript. If you work with React, then you’ll find this one extra helpful. Now, let me ask you a question.

Have you ever been simply coding away, only to realize that you now need to go back and change some of your HTML or JSX tags out for others? It’s almost as tedious as finding that extra/missing s or hidden comma. I don’t know about you, but this drives me a little crazy. Why waste that precious time when you could use these extensions?!

The aptly named, Auto Rename Tag and Auto Close Tag extentions will rename and close your tags automatically for you so you never have to worry about mismatched tags again. They also work out-of-the-box so you can start using them right away. Since they run in the background, you can focus your attention on the more important bits, your code! :)

htmltagwrap, on the other hand, is a little different. This is probably one of the extensions that I use the most in my day-to-day coding, often without even noticing.

In your editor (VSCode, in this case), simply highlight the text that you want to include in a new JSX/HTML tag and then type the handy keyboard shortcut Alt + W (Windows/Linux) or Option + W for Mac and your code will be wrapped in a new element tag. Take a look!

code editor showing text highlighted and wrapped in a new tag automatically using htmltagwrap extension

It defaults to a <p> tag, but if you need anything else, the tag name is automatically highlighted so that you can easily change it to whatever you need. You can even set a custom tag to be your default if there is one that you particularly use more than others simply by editing your VSCode settings directly.

✨ I know, you can thank me later. ✨

HOW TO INSTALL:

Marketplace:

Command Palette: ext install bradgashler.htmltagwrap formulahendry.auto-close-tag formulahendry.auto-rename-tag


Thunder Client

Postman, who?! Thunder Client is a lightweight Rest Client for testing all of your APIs. You can make the usual REST calls (GET, POST, PUT, DELETE), the lesser-used PATCH, as well as HEAD and OPTIONS. Along with all the features you’d expect from a standard Rest Client, you can now create documentation for your routes directly within the tool. Better yet, you can do all of this from right inside VSCode so you don’t have to keep track of yet another window on your desktop.

Just type in your endpoint URL, select your query method, and add finally any headers, params, or body contents that your heart desires. Click ‘Send’ and it’s off to the races. Easy peasy, lemon squeezy!

Take a look at how simple this is:

Thunder Client interface in VSCode showing a GET http request

HOW TO INSTALL:

Marketplace: Thunder Client

Command Palette: ext install rangav.vscode-thunder-client


ESLint / Prettier Code Formatter

This one makes my code-reviewer heart happy. ESLint, as you may already know, is a linter tool to help you quickly find problems, automatically fix them, and allows you to customize the rules to your own preference and enforces a consistent style. ESLint does this by analyzing your code based on the declared rules that you’ve enabled in your .eslintrc file within your workspace.

Prettier, on the other hand, is a code formatter tool that parses your code and attempts to fix any small auto-fixable problems, such as missing semi colons, indentation, and bracket spacing. Among many other programming languges, Prettier works great with React, TypeScript, and JavaScript. If, for some odd reason, you're not a fan of VSCode, Prettier also works in many other editors as well.

Although these two can have a bit of a learning curve to get setup properly, once these are both established in your project, you won't ever have to think about them again. They will continue to run, analyze, and attempt to fix any issues in your code as you’re typing away.

As much as I'd love to give you a more in-depth tutorial on how to install these tools, that is a bit out of the scope of this post. I'll just give you a quick rundown on how to get started with them and then link to some resources for you below.

HOW TO INSTALL:

Marketplace:

Command Palette:

  • ext install esbenp.prettier-vscode
  • ext install dbaeumer.vscode-eslint

Don’t forget to set your default formatter in VSCode settings! VSCode settings page showing where to edit the default formatter option


Jest

Finally, last but certainly not least is the newest addition to my essential extensions, Jest by Orta. I found this extension when I was starting to focus more on including tests from the start in my projects, and not as an afterthought. Jest provides an easy and intuitive interface within your editor to implement Facebook’s Jest framework.

Check it out! Jest interface in VSCode

It adds a new panel to your explorer pane so that you can reference the tests within your project. It also has the option to auto-run and watch your tests so as you’re editing files, your test runs will update and show you live feedback on which are passing or not.

Jest test panel in VSCode

I think that my favorite feature of this tool is that it shows you the test result in-line in your files. This saves even more time because I can gauge how my tests are doing without having to open my terminal endlessly and run the test script each time I want to check the status.

Jest test result in-line in VSCode

While this extension typically works out of the box with common jest setups, it's important to mention that it allows has plenty of customization options available for your unique use cases.

HOW TO INSTALL:

Marketplace: Jest

Command Palette: ext install orta.vscode-jest


Conclusion

Well, there you have it. 5 essential VSCode extensions that I've been using for a while now. I hope that you enjoy them all, and that they will help you get the most out of your VSCode experience.

Happy Coding!

Go Back

Kick your software into gear

hello@kickstand.work