Setting up VS Code for beginners
Tags: webdev, productivity, vscode, discuss
Published: 2021-11-29 16:46:59

VS code editor has arguably become the most popular tool for development. It is no doubt powerful, easy to get along with and very light. Customizing VS Code according to your needs and work can bring a massive difference in the performance of your development. But the question remains - Does it even matter how the code editor looks? Because after all it’s just a tool to get the job done. I personally think attention to details is very important, as a good looking working space or even a tool can greatly influence productivity. If I like how it looks, I’ll probably enjoy writing code even more. Also, for how long can you look at the same editor, I bet you get bored looking at the same thing all the time. 

So, in today’s article, I’ll present to you my top preferences to customize VS Code editor for maximum efficiency.

#Theme
Customizing themes according to your preference in VS Code is very well known in the dev community. Here are a few of my favourites that you can find and use for free through its marketplace.

##Andromeda:
![Andromeda VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um71pdc2w19sdmg6drtb.png)Andromeda is for devs who want to combine art with programming. It has one of the best UI with vibrant colors, dark background, etc. It has vivid colors and high saturation but if you like your interface to be minimal this is not the right choice for you.

[Try Andromeda](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda)

##Monokai Pro:
![Monokai Pro VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wryi4hag52bci4q9yl6m.png)Monokai Pro is undoubtedly a professional visual studio code theme that comes with colors. This is the one I use the most as I love colors and I’m one of those devs who love to have a plethora of colors to play with while coding. Monokai Pro is colorful but you won’t get overwhelmed with colors. So, it is bright, clean, and perfect to code on.

[Try MonoKai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)

##Abyss:
![Abyss VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shsvw2pxa4b7iq2njxas.png)This is one of the most underrated themes but I enjoy using it for some reason. This is literally like art. Very eye pleasing caring colors which fantastically classify semantics of the code.

[Try Abyss](https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Abyss)

#Icons 
##Material Icons:
![Material icons VS Code icons extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9pp2xwnmwthx4ff3qlc.png)I recommend it to anyone who would like their VS Code workspace to look modern, spiced up, and professional. It helps me instantly find folders without any issue and looks beautiful. Best theme for highlighting important project directories. This is the only Icon theme I’ve used and I’m enjoying it so far. Let me know your favourites down in comments and I'll give them a try.
[Try Material Icons](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

#Fonts 
##Fira Code: 
Fonts depend on personal taste. If you’re been writing code for years there is a chance that you might not want to change but for beginners it’s common to experiment and set one for yourself. Fira is one of my favourite fonts when it comes to coding as it makes it easy for me to read the code.
[Get Fira Code](https://fonts.google.com/specimen/Fira+Code)

##Monoid font:
Another favourite font is Monoid as it has extra-large punctuation marks and operators, apertures are large to help make characters more distinguishable, and ascenders and descenders are kept short and because it’s open source you can even tweak it to your tastes if you like.
[Get Monoid](https://larsenwork.com/monoid/)

##Hack Font:
Last but not the least, Hack. This is not the best but I like this font because it’s easy to read and is easily distinguishable.
[Get Hack](https://sourcefoundry.org/hack/)

#Extensions
##Prettier:
![Prettier VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z8d262we33os2q6s5k0.png)It is a tool that automatically makes your code more readable and consistent with your project's style guide. Prettier also integrates with your editor, so your code is tidied up every time you save your changes.
[Try Prettier](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

##blox:
![blox VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gpq1agbfcaij91qsmkd.png)blox is another extension that I prefer as a beginner because it lets you drop code snippets. It’s aimed at fast tracking the developer workflow through the ease of adding pre-built UI components without leaving your VS code window.
[Try blox](https://marketplace.visualstudio.com/items?itemName=vsblox.blox)

##Live Preview
![Live Preview VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qntx47rzcn6c7mzrrkt.png)Instead of switching between tabs/desktops everytime I want to see a change, Live preview hosts a local server where you can preview your web projects inside VS code. It has many preview features including HTML file previewing, Embedded preview, Persistent Server task with server Logging, External browser Previewing & Debugging, Console Output Channel, Workspace-less Previewing, and Multi-root Support.
[Try Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

#Conclusion
So this wraps up my top picks to set up Visual Studio Code for Beginners. Let me know your favourite picks down in the comments. Hope y'all enjoy this article too.

Happy Developing!