Boost your proficiency with Visual Studio Code by learning how to customize your preferences and change the default font. This comprehensive tutorial provides step-by-step guidance for both Mac and Windows users.
Key Insights
- The tutorial begins with detailed instructions on setting preferences in Visual Studio Code, with distinct steps for Mac and Windows users.
- Through the 'Preferences > Settings' path, users can adjust their editor interface to their liking.
- The 'Editor: Tab Size' preference is specifically mentioned, allowing users to adjust tab width for a more streamlined view.
- The tutorial also covers the process of changing the default font in Visual Studio Code.
- The 'Source Code Pro' font from Adobe is recommended due to its coding-friendly design and availability for free download.
- Users are guided on how to incorporate the 'Source Code Pro' font into their Visual Studio Code interface through the 'Preferences > Settings' path.
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.
Customize VS Code Preferences
-
Open Settings
Code → Preferences → Settings (Mac), File → Preferences → Settings (Windows).
-
Search to Find Settings
Type into the search field — e.g. 'tab size' to change indentation width.
-
Change the Default Font
Search 'font family' — add 'Source Code Pro,' at the start of the list.
-
Settings Sync
Sign in to sync settings, extensions, and keybindings across machines.
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
