VS Code Building Blocks

Gary Marino Jr
3 min readSep 16, 2019

Having the right tools for the job is vital to anything you do. Having them calibrated and optimized for you will only enhance your productivity. Over fifty-five percent of web developers use Visual Studio Code. A large part of its popularity can be attributed to the sheer amount of customizability available via extensions. Below I cover some of my favorite extensions that enhance the experience of VS Code.

Themes

You are going to be spending a large amount of time looking at your text editor might as well make it look as pretty as possible. VS Code offers a number of themes and icon packs from its extensions tab. Typing @category:themes into the search bar will let you go through all of them.

My preferred theme is Dracula Official. The color scheme is perfect for long hours of viewing and the contrast of colors make it easy to read.

https://draculatheme.com/visual-studio-code/

Icons

https://materialdesignicons.com/

My preferred icon pack is Material Icon Theme by Philipp Kief. It supports several file and folder extensions. I rarely ever bother looking at file extensions or reading folder names anymore. The folder/file icons are unique enough that I can tell what I am working on at a quick glance.

Developmental Server

Launch a development local Server with live reload feature for static & dynamic pages.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Wrap Up

Now that you’ve customized your settings, you can save your settings using the extension Settings Sync. Settings Sync works by using GitHub and gists to sync customized settings in VS Code.

If you’re looking for a few more ideas, the VS Code documentation makes a few helpful suggestions.

Also please share and suggest your favorite extensions.

--

--