DEV Community

Cover image for Master VS Code + Resources!
Hardik Chopra
Hardik Chopra

Posted on

Master VS Code + Resources!

Most of the time of a developer is spent on an IDE/ Code Editor. So it is very important to work in an environment that suits your needs and is comfortable for you.
We will be talking about customizing one of the most popular Code Editor VS Code

Contents


Don't Miss the Bonus and Resources at the end 🔥!

Themes

To customize the theme in VS Code, go to Settings and select color themeor type ctrl/cmd + K + ctrl/cmd + T.
Here you can find some pre-installed themes in VS Code.

You can also download themes from the extension search.
Some popular themes are :


Fonts

To customize the font of VS Code go to settings ctrl+, > User > Text Editor > Font.
You can find the font-family option here, where you can change the font-family, font-style of your choice!

Alt Text
Personal Favorites:


Icons

You change the folder and file icons in VS Code. To see the pre-installed options, go to Settings > File Icon Theme.

Alt Text
Make sure the Seti is selected on VS Code.
I use the Material Icon Theme (The Best 👑)


Keyboard Shortcuts

Keyboard Shortcuts saves you a lot of time as a developer and VS Code has got you covered. VS Code has many inbuilt shortcuts.
To preview the shortcuts, go to Settings > Keyboard Shorcuts or press ctrl/cmd + K + ctrl/cmd + S

Alt Text

The best thing is that you can also customize these shortcuts and can override them very easily!


Extensions

Extensions are a very powerful tool in any IDE. VS Code has many of them and specifically for customization following are my picks.

  • Sublime Text Keymap
    Are you an avid Sublime user, nervous to switch over to VS Code? This extension will make you feel right at home, by changing all of the shortcuts to match those of Sublime.

  • Prettier
    DONT spend time formatting your code. Let Prettier do it for you It's super easy to set up and can be configured to format your code automatically on save.

  • Better Comments
    This extension color codes various types of comments to give them different significance and stand out from the rest of your code. Use green color for informatory comments and red color for ToDo comments and much more!


Bonus 🔥

Font ligatures

Alt Text

Font Ligatures are when multiple characters appear to combine into a single character. Simplistically, when you type two or more characters and they magically attach to each other. VS Code now supports font-ligatures.

To activate font-ligatures you need the fonts that also support font-ligatures, examples of such fonts are --> Fira-code, Inconsolota, and many such.

Step by Step Guide to activate Font Ligatures


If you got to learn something new and useful show some love by giving this post a ❤️

Do you know any other customization tricks? Do share it in the comment section!

More Resources :

If you have read so far, save this post and share it with your programming buddies 😃

Oldest comments (12)

Collapse
 
banji220 profile image
Banji

Keep it up :)

Collapse
 
hardikchopra profile image
Hardik Chopra

Thanx. ☺️👍

Collapse
 
parth_codes profile image
Parth Bhardwaj

Bonus section is awesome.... i'll surely go through it.

Collapse
 
hardikchopra profile image
Hardik Chopra

Yeah, that's the coolest thing for me too 😜

Collapse
 
mortoray profile image
edA‑qa mort‑ora‑y

The left image "From This" has a nicer proportional font. Especially with nice ligatures, why would you want a monospace font?

Collapse
 
hardikchopra profile image
Hardik Chopra

Sorry, but which image are you talking about? I didn't get your question.

Collapse
 
mortoray profile image
edA‑qa mort‑ora‑y

The title image you used for the article.

I meant I prefer the before image, with the nicer font. :)

Thread Thread
 
hardikchopra profile image
Hardik Chopra

That was just to show that you can customize the font of your choice, not necessarily that one, it depends from person to person.
To demonstrate how we can change the font was needed to apply font ligatures that come with other fonts that are not pre-installed.
I thought a lot of users may not know about font-ligatures ☺️

Collapse
 
mehdico profile image
Mehdi Mousavi • Edited

Some suggestions:
Themes: All three themes have a bluish background color, I suggest black background (not pure black) especially if you have a display with VA panel.

Fonts: I've tried almost all famous fonts for coding, Fira Code is amazing, Period.

Icons: I hate everything related to Material Design. anyway, I prefer simple and flat icons with neutral colors.

Keyboard Shortcuts:  I think the best default keyboard shortcuts for coding are from Jetbrains IDE's.

Collapse
 
hardikchopra profile image
Hardik Chopra

Thank you for a detailed analysis 😇
Appreciated 🙌

Collapse
 
midblep profile image
Mid

Thanks for the golden tip I needed with Font Ligatures! Didn't even know their name and kept seeing them in places like videos and tutorials. They're awesome!

Collapse
 
hardikchopra profile image
Hardik Chopra

Yups! they are pretty cool.!!⚡