*I may be compensated if you purchase through any affiliate links on this site.*
Things have come a long way with code editors since I started my development career four years ago. During my coding bootcamp days, I was using Sublime Text. When I moved into my first job I used Atom, and then eventually Visual Studio Code (VS Code).
At this point, I think VS Code is a top choice for new web developers because of all the wonderfully helpful extensions available to users.
How many times have we gotten stuck on something because we can’t find a missing bracket? Or how great would it be to have an HTML boilerplate ready to go with a few simple keystrokes?
If you’re a new developer, I urge you to install these 5 VS Code extensions as soon as possible! It will help alleviate any trivial roadblocks you might encounter that will only further complicate your learning.
HTML Boilerplate
I remember when I first started learning how to code, I was very concerned that I was going to have to memorize how to setup HTML files for new projects. It seemed like a cruel expectation. Thankfully, that is not an expectation of anyone and they make extensions for that!
HTML Boilerplate does all the work for you! All you have to do is type: html.
Bracket Pair Colorizer
We have all had days in our development careers where we were chasing down matching brackets. It doesn’t matter if you’re a beginner or a seasoned professional — it happens to everyone!
The Bracket Pair Colorizer extension is a great way to keep track of what brackets go where. Sure, the errors in the editor are great and helpful, but sometimes they can be a little misleading. This extension helps to expedite the process of finding that curly brace you accidentally deleted.
Live Share
Live Share is a wonderful feature of VS Code that allows you to collaborate with other developers in real-time. For those of you who are starting your career in a remote setting, whether you’re in school, bootcamp, or starting a new job, this makes collaborating with peers so much easier.
Live Server
I totally forgot about this until a wonderful co-worker reminded me of it. When you are just getting started with HTML, CSS, and JavaScript, trying to see what you’re creating in real-time can be a little cumbersome. This is where Live Server makes things a bit easier for you.
Once this extension is installed and activated for your specific project (make sure you read the instructions on how to use it), you will have a local development server running with live reload. So helpful!
I hope that helps!
Learning to code is a huge undertaking and I believe these four features mentioned will really alleviate some of the unnecessary challenges that you might face along the way.
Are you new to coding and have questions? Let me know! Follow me for more articles like this one.
Photo by Lewis Ngugi on Unsplash