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. :)
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.
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.
HOW TO INSTALL:
Marketplace: ES7+ React/Redux/React-Native snippets
ext install dsznajder.es7-react-js-snippets
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
W (Windows/Linux) or
W for Mac and your code will be wrapped in a new element tag. Take a look!
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:
ext install bradgashler.htmltagwrap formulahendry.auto-close-tag formulahendry.auto-rename-tag
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:
HOW TO INSTALL:
Marketplace: Thunder Client
ext install rangav.vscode-thunder-client
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.
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:
ext install esbenp.prettier-vscode
ext install dbaeumer.vscode-eslint
Don’t forget to set your default formatter in VSCode settings!
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.
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.
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.
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:
ext install orta.vscode-jest
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.
Kick your software into gear