7 Essential Visual Studio Code Plugins for MERN Stack Development

Jonathan Watson
4 min readFeb 4, 2020

--

So, you finally made it. You’re a MERN stack developer. Congrats!

Depending on the shop you wound up in, you may find yourself using one of several options for your IDE. Though it takes a while to master, one of my favorite IDEs is WebStorm. The problem is, WebStorm is pay-to-use software, and many companies aren’t interested in a subscription (ironic, isn’t it?).

So, that leaves us with a second, very solid option: Visual Studio Code.

Visual Studio Code window with a jsx snippet, highlighted TODO, and underlined variable name.

Visual Studio Code is a plug-and-play editor. Meaning that it comes with the bare-bone essentials, but allows for significant add-ons. Here is a list of my favorite (and essential) Visual Studio Code plugins for MERN stack development.

1. Reactjs Code Snippets

Who has time to remember exactly how to create a React component? Even if you did, who has the time to actually type it out?

Reactjs Code Snippets allows you to type simple commands to quickly create new components. For example, typing:

rcc

would create a react class component.

rsc

would create a react stateless component (or functional component).

Similarly, adding a “p” on the end of either one of these adds PropTypes to the component (an important method of ensuring your incoming props match appropriately).

rccprscp

There are numerous other options, but these are my most-used shortcuts when writing react.

Note: if you name your file appropriately (Dashboard.jsx, for example) Reactjs Code Snippets automatically names your component to match.

2. Git Extension Pack

You might not think that this is important based on its minimal number of installs (just over 149,000 at time of writing). But when you look at the additional add-ons it contains, you’ll begin to understand just how important it is. It includes:

  • Git History (2 million downloads)
  • GitLens (4 million downloads)
  • Project Manager (800 thousand downloads)
  • gitignore (400 thousand downloads)

In short, it’s a quick and easy way to ensure you get all those nice GUI git features.

Personally, I prefer to use it to create branches (and immediately check them out), compare changes, and to selectively add files for a commit.

3. TODO Highlight

As a former WebStorm user, I love their TODO highlighting. To be fair, WebStorm also checks your files for TODOs and provides warnings before pushing code to a remote repository, but that’s beyond our scope here.

TODO Highlight does exactly what it says and highlights these flags more obviously in your code base.

4. Prettier — Code Formatter

Everybody needs some formatting sometime. Prettier is the go-to option. When configured correctly, you can format your files automatically on save. Or, if you don’t trust the autosave, you can format it with a key combination.

5. ESLint

ESLint allows you to specify how your code is formatted. But it goes beyond that. You can specify quote options, spacing, variable names, etc. The linter will then display any lines that don’t meet these specifications. Additionally, it provides auto-fix options for the simpler code changes.

6. Code Spell Checker

Your spelling sucks. No offense. Mine does too. It’s hard enough coming up with variable names. It’s even harder trying to spell things correctly while deciding on camelCase.

Avoid wasting time fixing mis-matched variable and function names with this incredible spell checker.

7. Auto Close Tag

Writing closing tags takes time. Time is money. This extension saves you money. Or maybe it just keeps you from trying to find which tag you forgot to close when your code stops compiling.

Bonus Extensions

Bonus 1: open in browser

Every now and then, even a MERN stack engineer needs to work with simple HTML files. Open in browser allows you to right-click on a file and open it directly in the browser. Saving time and clicks.

Bonus 2: Material Icon Theme

Add some color and some style to your VSCode. Not strictly required, I find it helps bring clarity to my workspace.

If you enjoyed this post or found it helpful, would you do me a favor and by follow me here, on Medium?

--

--

Jonathan Watson

Jonathan is a Senior Software Engineer in the Atlanta area. When not cranking out React, he enjoys teaching and traveling.