8 Useful VSCode Add-Ons New Front-end Developers Should Absolutely Download 🛠

Add these helpful tools to your favorites list today

Nicole Peery
Jun 11 · 5 min read

When I started coding in the dark ages of 1995, snazzy code editors weren’t a thing. Back then, I used a native Windows program called Microsoft Notepad to write code.

Not only was it beyond basic, but everything was manual, too. I wrote code line by line with no autocomplete, linter, or helpful plugin in sight.

It got a little easier two years later with the introduction of a WYSISYG editor called FrontPage. I say a little easier because anyone who’s ever worked with FrontPage knows it had its own issues. 🤣

Imagine my delight when I got back into coding years later and found out how much the humble code editor had evolved. Like many new front-end web developers out there, I began with Atom and moved on to an editor called VSCode as I got more advanced.

Getting started with a new code editor can be overwhelming. It’s a question that comes up a lot when I’m working with web development students. So today I’d like to share my list of must have VSCode tools for front-end development.

Atom Keymap

When I considered leveling up my code editor game, I wasn’t excited about learning different shortcuts. I already had my favorite ones in Atom, and I didn’t want them to change.

This extension moves the Atom keyboard shortcuts over to VSCode so you can keep coding without learning a whole new workflow. Win!

Auto Rename Tag

Ever decide to change an HTML tag name and forget to rename the closing tag?

Sure, you could spend precious coding time trying to chase down the incorrect tag. You could even run your code through various validators to try and figure out where you went wrong. Or you could install this extension and let it rename closing tags for you.

Bracket Pair Colorizer

If you’re like me, you learn and work best through visuals. This extension colorizes brackets and gives visual cues that show you where one piece of your code starts and ends.

Since I’m relatively new to JavaScript, this extension has been a life saver more times than I can count. The colored brackets help me clean up, troubleshoot, and debug my code at a glance.

IntelliSense for Class Names

How much time do you spend trying to remember class names when you’re coding?

I name classes following the BEM Methodology, but sometimes I have “one of those days” where my brain needs a little help.

If you install this extension, you’ll get access to an autocomplete feature that gives you a list of matching classes. Just start typing and away it goes.

Live Server

This extension adds a button to the bottom of the code editor screen that lets you start a live development server. It has an automatic reload feature and works with dynamic and static pages.

I love being able to launch the server, make some changes, and see what happens to the page immediately.

Material Theme

I spend a lot of time working in my code editor, so I want to make the space mine and customize as much as possible.

Also, when I stare at screens for long periods of time, my eyes get strained. It’s important for me to have the ability to customize the contrast of my on-screen tools.

Material is my go-to theme for VSCode. I like its minimal feel and the included file and folder icons. With a variety of dark and light themes to choose from, it’s a great addition to your VSCode tool belt.

Prettier Code Formatter

Prettier is a time saving extension that keeps your code organized. When you hit save, it goes to work on your indentation, semicolons, spacing, quotes, and much more.

You can set it up to follow a specific set of style rules or stick to the default settings. It’s great for standardizing code from other sources or making quick changes when your style needs evolve.

Simple Icons

The file and folder icons included with Material Theme are great, but sometimes I feel like switching things up. These are my favorite non-Material theme icons for VSCode.

They’ll give your file explorer a little pizazz and help you locate file types in a snap.

If you’re getting started with VSCode as a front-end developer, I hope this article took some of the guesswork out of choosing your first extensions, themes, and tools.

I’m always on the hunt for great new tools to add to my development workflow so if there’s a VSCode extension you love, tell me about it below!

The Startup

Medium's largest active publication, followed by +469K people. Follow to join our community.

Nicole Peery

Written by

Front-end web developer | Desert dweller | Full-time RVer | I write about desert living, web development, productivity, & more.

The Startup

Medium's largest active publication, followed by +469K people. Follow to join our community.