Master the customization of Visual Studio Code with this tutorial, covering how to set preferences and change the default font.
This exercise is excerpted from Noble Desktop’s front-end web development (Visual Studio Code) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
Setting Preferences
-
In Visual Studio Code do the following:
- Mac users: Go into the Code menu and choose Preferences > Settings.
- Windows users: Go into the File menu and choose Preferences > Settings.
-
You can either look through the preferences or use the search field to find the preference you want.
For example, you may want to change the Editor: Tab Size preference from 4 (the default amount) to 3 so tabs are not so wide.
Changing the Default Font
Source Code Pro is a really nice coding font from Adobe. You can download it for free on fonts.Google.com. After installing the font, you can set Visual Studio Code to use it as follows:
-
In Visual Studio Code do the following:
- Mac users: Go into the Code menu and choose Preferences > Settings.
- Windows users: Go into the File menu and choose Preferences > Settings.
- In the search field type: font family
-
Find Editor: Font Family and add Source Code Pro, (don’t miss the comma) at the beginning of the font list.
You should end up with something like: Source Code Pro, Menlo, Monaco, ‘Courier New’, monospace
