Master VS Code + Resources!

hardikchopra

Hardik Chopra

Posted on December 24, 2020

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 😃

💖 💪 🙅 🚩
hardikchopra
Hardik Chopra

Posted on December 24, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related