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!
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.
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 😃
Top comments (12)
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.
Thank you for a detailed analysis 😇
Appreciated 🙌
The left image "From This" has a nicer proportional font. Especially with nice ligatures, why would you want a monospace font?
Sorry, but which image are you talking about? I didn't get your question.
The title image you used for the article.
I meant I prefer the before image, with the nicer font. :)
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 ☺️
Keep it up :)
Thanx. ☺️👍
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!
Yups! they are pretty cool.!!⚡
Bonus section is awesome.... i'll surely go through it.
Yeah, that's the coolest thing for me too 😜