Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 29, 2021 04:46 pm GMT

Setting up VS Code for beginners

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 its 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, Ill 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 todays article, Ill 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 extensionAndromeda 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

Monokai Pro:

Monokai Pro VS Code extensionMonokai 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 Im one of those devs who love to have a plethora of colors to play with while coding. Monokai Pro is colorful but you wont get overwhelmed with colors. So, it is bright, clean, and perfect to code on.

Try MonoKai Pro

Abyss:

Abyss VS Code extensionThis 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

Icons

Material Icons:

Material icons VS Code icons extensionI 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 Ive used and Im enjoying it so far. Let me know your favourites down in comments and I'll give them a try.
Try Material Icons

Fonts

Fira Code:

Fonts depend on personal taste. If youre been writing code for years there is a chance that you might not want to change but for beginners its 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

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 its open source you can even tweak it to your tastes if you like.
Get Monoid

Hack Font:

Last but not the least, Hack. This is not the best but I like this font because its easy to read and is easily distinguishable.
Get Hack

Extensions

Prettier:

Prettier VS Code extensionIt 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

blox:

blox VS Code extensionblox is another extension that I prefer as a beginner because it lets you drop code snippets. Its aimed at fast tracking the developer workflow through the ease of adding pre-built UI components without leaving your VS code window.
Try blox

Live Preview

Live Preview VS Code extensionInstead 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

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!


Original Link: https://dev.to/harishash/setting-up-vs-code-for-beginners-4m03

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To