7 Essential Visual Studio Code Plugins for MERN Stack Development
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 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:
rccwould create a react class component.
rscwould 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?
