Must have Themes and Extensions for every Developers - Visual studio code setup
Tags: programming, vscode, webdev, productivity
Published: 2021-04-07 06:55:00

Personally I have been using Visual studio Code since back in 2018, and it has turned out to be one of my all time favorite code editor. The main reason why I like VS code is the ability to customize it to fit your needs, You are able to set it to look the way you will like it by adding your favorite themes, extensions, and even able to share code and even able to do a team work using VS code. As a developer what else would you ask for? 
In this article I decided to share some of the most used themes and extensions by developers out there:  
### Let's Get Started:
#### <mark>Themes</mark>
> In every bit of honest writing in the world, there is a base theme.  

Themes not only changes the setup look but also enhances the user experience and productivity, they also let you give a completely unique look and feel to your editor and setting the right one will get you started to greater productivity. 
Most developers prefer Dark themes, Do you?
- [Cobalt 2 Theme](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) 
- [Sandstorm](https://marketplace.visualstudio.com/items?itemName=Bardleware.sandstorm)
- [Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)
- [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)
- [Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)  

#### <mark>Extensions</mark>  
This are what lets you add languages, debuggers and different tools to your setup to support your development work flow.
Here ae some of the most useful extensions for developers: 
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68lo6nfjl0om2cvrqpy9.PNG)
It is an extension that enables real time collaboration between developers. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndjvengvsw4m5l71bfwh.PNG)
This extension is used for launching a development local server with a live reload feature for static and dynamic pages. This saves times for previewing the changes made to your source code by just making the changes in the VS code and saving the file, this will automatically refresh the browser and reflect the changes you have made in it, instead of us manually refreshing the browser page.
- [Code Snapshot](https://marketplace.visualstudio.com/items?itemName=robertz.code-snapshot) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbmpacv7hjx8qbkupvx1.PNG)  
Ever seen those beautiful code screenshot and ever wonder how they did it? Well this is the extension they use give it a try and change you code screenshot look.  
- [Auto rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48xdqxhoxocmrf5zv42w.PNG)
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.  
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wywts8iblq9gwog8oqrj.PNG) 
It is a basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.  
- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f1znvudp2064u53irxc.gif) 
It allows you to run code file for multiple languages. 
- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6dmhifnjl0chd4zaugm.PNG) 
With over 7 million downloads, It gives you an option to customize file icons, folder icons to beautifully designed material icons.
- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1ky5gmc5e9iycplwupy.PNG) 
It will help you create more human friendly comments in your code. With this you are able to categorize annotations into: 
 * Alerts
 * Queries
 * TODOs
 * Highlights
 * Commented out code can also be styled to make it clear the code shouldn't be there
 * Any other comment styles you'd like can be specified in the settings 
- [Markdown Preview](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gba1plt1qunwrxrxalzv.PNG) 
This extensions enabled you look how your output will be once you have written it in markdown. 
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcclko2uekrgqhiqrmhp.PNG)
This is one of the best extensions for JavaScript and React/Redux code snippets. 
- [VScode-pdf](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w035fze5xb363lh22uy1.gif)
It allows you to check and open your pdf right there in your VS Code.  
#### <mark>Fonts</mark>  
- [Victor mono](https://rubjo.github.io/victor-mono/) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52z3ou7uvssr96npn41b.PNG)
Victor Mono is an open-source monospaced font with optional semi-connected cursive italics and programming symbol ligatures. 
The typeface is slender, crisp and narrow, with a large x-height and clear punctuation, making it legible and ideal for code. It comes in seven weights and Roman, Italic and Oblique styles. 
- [Monoid](https://larsenwork.com/monoid/)
- [Ubuntu Mono](https://design.ubuntu.com/font/) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efi5fmkszfafdz2j66qd.PNG)
- [Roboto](https://fonts.google.com/specimen/Roboto+Mono) 
- [Press Star 2P](https://github.com/codeman38/PressStart2P) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hplhrplzl0j7jdqmxoga.PNG) 
#### Conclusion
I hope you’re eager to use these most amazing VS Code Extensions, themes and font to improve your productivity.
The above listed ones are by far the most preferred, they were selected by comparing the number of downloads, which most have over 2 million downloads, this means most developer use them on daily basis.

If You have read this far I really appreciate, Help me to grow my community:

Also check out my other article on: 
[7 Best Visual Studio Code Extensions Every Web Developer Should Have.](https://dev.to/larymak/7-best-visual-studio-code-extensions-every-web-developer-should-have-2m1c) 

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/)  | [GitHub](https://github.com/larymak)