5 Must-Have VSCode Extensions | by Leesel Fraser

Visual Studio Code, often called VSCode in the development community, is a popular code editor provided by Microsoft. VSCode offers a vast array of features and enhancements that allows it to be one of the most popular and favored integrated development environments (IDEs) used by developers today. 

Developers enjoy VSCode because of how much it improves their development experience. One of the most beloved aspects of this IDE is that it comes with an amazing library of helper extensions and tools and many of them are created by individual developers themselves. You can find them in the Extensions section of your VSCode on the left-hand vertical navigation bar. There is an icon that looks like below:

If you are just starting your SWE apprenticeship with Multiverse, you may be new to using VSCode or you may be someone who has not used VSCode at all or someone who has used it, but never looked into any extensions. 

In this article, I will share some of the top 5 must-have VSCode extensions (and a few bonuses) to get you started on exploring this amazing IDE and begin to maximize your development experience and fill your IDE with its own unique personality.

1. Prettier

The first extension I recommend every developer to have is some type of code formatter. A “code formatter” is a tool that makes your code more organized and easier to read - this also makes it easier for developers to understand it and debug if errors arise.

2. IntelliSense (Programming Language-Specific)

Intellisense is a word used to reflect the ability of your code editor to “intelligently sense” or predict what you may be intending to code in order to give you suggestions for autocompletion that allow you to code faster and also help prevent human error. 

When you install VSCode, you get IntelliSense included for JavaScript, TypeScript, JSON, HTML, CSS, SCSS, and Less but you can also install IntelliSense for Python, Java, Go and more languages through their specific extensions in the VSCode Marketplace.

3. Code Snippets

As you begin to develop more and more, you learn that some parts of code are repetitive and you find yourself writing the same code for different projects or even in different files in the same project. For example, many parts of creating a head for an HTML page or a new react component can be repetitive. 

If you code a lot, you may want to have a shortcut that allows you to just type a few characters and have those parts autocomplete for you. Code snippets help you get all of the ‘fluff’ code out of the way, allowing you to just have to type the unique parts of your code - a huge timesaver!

4. GitLens

Oftentimes when developing bigger applications using git, where many different people may be working on the same project, it can be helpful to have a view of what is going on in git and see who authored certain parts of the code. GitLens allows you to do just that and offers great visuals inside of your code editor to truly supercharge your git experience.

5. Live Server

Chances are you will make a static webpage at some point, even if it is just for your first portfolio website using HTML, CSS, and Javascript. A great extension for easing your experience with developing static pages is Live Server. 

It can be cumbersome to have to keep reloading the page or opening and closing a page to see your updated changes get reflected on the page. Live Server offers live updates and reloading so that you don't have to worry about doing it manually yourself!
 

Bonus: Custom Themes

The most recognizable change or additional add-on to your IDE will be the theme! There is an endless amount of custom themes to choose from with VSCode and they are super easy and quick to add! To add a new theme to your VSCode on Mac, go to Code > Settings > Theme > Color Theme > Browse Additional Color Themes.

I prefer and recommend dark themes, try One Dark Pro or Github Dark as a starter. (or my favorite, the beautiful shades-of-purple theme, demonstrated below 😉)

Bonus: Material Icon Themed File Icons

A nice small addition to your file view is to add icons that visibly differentiate your files. You can add these with the Material Icon or VSCode-Icons extension.

Bonus: Terminal Shell Command

Once you start developing more, you may desire to do everything from the terminal more and this includes using the terminal to open up your Code editor!

A cool way developers open up their VSCode from the terminal is to install something called a shell command.

To do this, open up a new VSCode window, press Command + Shift +P, search ‘shell’ and click ‘Shell Command: Uninstall’ and then do it again but this time select ‘Shell Command: Install’. You may now need to restart your VSCode and Terminal. After restarting, you should be able to open folders using the “code” command from the Terminal. Go to a project directory and once inside, type ‘code .’  and press enter. Watch your VSCode open all on its own, like magic! ✨
 

Of course, these are only a very small few of the extensions you can bring into your IDE, but hopefully, they help get you started on VSCode. 

Feel free to check out all of the extensions on the VSCode Extension Marketplace. Also, please be sure to leave some more recommendations in the comments section, and let me know what you think of this list.

Thanks for making it this far into this lengthy article -  I hope this was a meaningful extension to your day. 🤓

Leesel Fraser is a US-based Software Engineering Apprentice at Multiverse and is writing for the Apprentice Lens as part of the Blogging Team. Here’s more about her:

“Born and raised in New York City, Leesel grew up in a fast-paced environment around a melting pot of diverse experiences and backgrounds, and at a young age, she found her passion for technology, problem-solving, and continuous learning. She aims to write blogs that will help you understand technical concepts as well as learn and grow professionally and personally.”