This VS Code customs combo is lit! 🔥
Tags: vscode, javascript, programming, productivity
Published: 2022-06-25 11:55:00

When it comes to coding straight for hours, you might get it somehow boring too for sitting for a long period of time in front of a monitor. And you will wish for customizability within [VS Code](https://code.visualstudio.com/).

That's why in this article I will discuss about some popular trending customs for your VS Code for productivity! 🚀



### 1. Cascadia Code (FONT)
This is one of my favourite font family and recently I saw it is going quiet popular too.
To make cascadia code as your default font family in vs code follow following steps:
- Open setting in VS Code
![Open VS Code Setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6zx09gcpedr2raeexk5.png)

- Search for `font` in search bar.
![Search in VS Code setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4uw22l6bmto56d81pe2.png)

- Add `cascadia code` in `font family` as shown in picture below.
![Change font family](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wcu9fnpi3qgjmz27ss6.png)

Still you will not notice any changes, since you have to install `Cascadia Code` font family from _[microsoft](https://github.com/microsoft/cascadia-code/releases/tag/v2111.01)_.

![Download this file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfpesb35zrrkmwkjnrp2.png)
Now extract the downloaded file and open `ttf` folder from extracted file and open following file to install font.

![Install Cascadia Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syh4qcq1a8nzbxmrfxqd.png)
That's it ⚡, now reopen VS Code you will really love this font family, I swear.


_💡 Note: If by chance, you font family doesn't applied then try to restart pc once. In 99% cases you would not have to restart the pc but in case something went wrong, just restart the pc and font will be applied!_
 
### 2. Font Ligatures (FONT STYLE)

You might see someone writing following code,
an arrow function looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpod4mlaucsxpwa0tl4k.png)

And triple equal to (===) looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgucnrkg2oeiwvxoqnnr.png)

It actually looks so awesome!✨ This all happens due to Font Ligature. Do you want to write like this? Here you have to do for this:
- Open `settings` in VS Code. And search for `font` in search bar you will find following result.
![Font Ligature Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tv9rqhi0h4h4lfgrvsw.png)
- Click on that tab and it will open `settings.json` file make the following change in it:
Initially, you will see

```json
"editor.fontLigatures": false,
```
Just replace `false` with `true` and all done! This effect will immediately apply on your editor.

```json
"editor.fontLigatures": true,
```

 
### 3. Editor Theme 

I personally love to use [`Cobalt2`](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2), But there are many good themes are available in [VS Code Marketplace](https://marketplace.visualstudio.com/vscode) and using it from a long time

You can also try [Material theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme), [JellyFish theme](https://marketplace.visualstudio.com/items?itemName=PawelBorkar.jellyfish) or [Github theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) etc.

## Conclusion:

Here is a sample code when you apply all the above recommendations.
![Conclusion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wkpbsl7qw257ctdd20v.png)


> Hit like if you really like this article and feel free to ask queries in comment section. 🙏