Master VS Code + Resources!
Tags: webdev, programming, productivity, javascript
Published: 2020-12-24 07:29:11

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
* [Themes](#themes)
* [Fonts](#fonts)
* [Icons](#icons)
* [Keyboard Shortcuts](#shortcuts)
* [Extensions](#extensions)
* [Something Special !](#ligatures)
* [Resources](#resources)

------------------------------------------------------
Don't Miss the Bonus and Resources at the end :fire:!|
-----------------------------------------------------

---

<a name="themes"></a>
# 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 :
* [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) 
* [Cobalt 2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
* [Radical](https://marketplace.visualstudio.com/items?itemName=dhedgecock.radical-vscode)

---

<a name="fonts"></a>

# 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](https://dev-to-uploads.s3.amazonaws.com/i/13jeouy6b708vk7fv7j9.png)
Personal Favorites:
* [Fira Code](https://github.com/tonsky/FiraCode)
* [Inconsolata](https://fonts.google.com/specimen/Inconsolata)
* [Victor-mono](https://rubjo.github.io/victor-mono/)

---

<a name="icons"></a>

# 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](https://dev-to-uploads.s3.amazonaws.com/i/opa0n0dmvofjfgsshhbb.png)
Make sure the **Seti** is selected on VS Code.
I use the **Material Icon Theme** (The Best :crown:)

* [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
* [VS Code Icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)

---

<a name="shortcuts"></a>

# 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](https://dev-to-uploads.s3.amazonaws.com/i/nl3l4zbzsstt1x6n2c9e.png)

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

<a name="extensions"></a>

# 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](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings)
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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
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](https://marketplace.visualstudio.com/items?itemName=aaron-bond.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!

---

<a name="ligatures"></a>

# **Bonus :fire:**
### **Font ligatures**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qsj6z5qg383twjy2ddu.gif)

**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](https://tahoeninjas.blog/2019/03/16/setting-fira-code-as-your-default-visual-studio-code-font/)

---

*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!

<a name="resources"></a>

### **More Resources** :

* Try out different programming fonts online [click here](https://www.programmingfonts.org/)

* {% link https://dev.to/thegeoffstevens/50-vs-code-themes-for-2020-45cc %}

* {% link https://dev.to/hardikchopra242/cool-extensions-for-vs-code-48jc %}

* {% link https://dev.to/gedalyakrycer/10-visual-studio-code-tricks-to-unleash-your-productivity-p6a %}


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