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.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
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