Master VS Code + Resources!
Hardik Chopra
Posted on December 24, 2020
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 theme
or 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!
Icons
You change the folder and file icons in VS Code. To see the pre-installed options, go to Settings > File Icon Theme.
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
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
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 :
Try out different programming fonts online click here
-
Article No Longer Available
If you have read so far, save this post and share it with your programming buddies 😃
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
July 25, 2023