Customizing Visual Studio Code

Many developers are using Visual Studio Code recently, especially open source developers who are enjoying its features, but some people don’t like the font (Monaco) that comes by default with Visual Studio Code, or maybe they want to use bash commands in terminal. The good thing is, you can customize Visual Studio easily, because Visual Studio Code was built in JavaScript, so in order to customize it, you can modify a JSON file that comes with it. You can open the settings file by going to File > Preferences > Settings, or by clicking Control + , 

 

 

It’ll open a JSON file where you can customize many things, let’s say that we want to use bash commands inside of VSCode , to do this make sure you have bash installed, if not, the easiest thing to do is to go to: https://git-scm.com/downloads  and download the one for your OS. 

Once bash is installed, you’re ready to customize VSCode to use it instead of command prompt. To do this, add this line in VSCode’s settings.JSON file: 

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

 

So your file would look like this

 

 

Note that the value on the right side is the path to the bash executable file. Now if you click Control + ` (backtick), the terminal will appear, and you will see bash.exe as the default tool to write your commands: 

 

 

Let’s have another scenario, let’s say you want to increase the font size, you add something like this: 

"editor.fontSize": 17

 

Now let’s try to change the font-family, to do so, add this: 

"editor.fontFamily": "Lato"

 

So your file would look like this: 

 

 

Now you’ll wonder, how can you know which fonts are available on your OS? For Windows you can execute these 2 commands in PowerShell: 

[System.Reflection.Assembly]::LoadWithPartialName("System.Drawing")

(New-Object System.Drawing.Text.InstalledFontCollection).Families

It will list all fonts you can use. Want to have extra fonts? You can get new ones from https://fonts.google.com , after you download your font, you will have a font.zip file, extract it and you’ll see the fonts you downloaded as font-name.ttf. Right click on the font name and choose install.. and that’s it! 

 

I hope this gave you an idea on how to customize VSCode to suite your needs, it’s an awesome editor and it’s worth considering when developing your applications.