8 Useful VSCode Add-Ons New Front-end Developers Should Absolutely Download 🛠
Add these helpful tools to your favorites list today
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.
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.
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.
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.
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.
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!