Skip to main content
Dan Rodney/1 min read

Topic 2E: VS Code: Preferences

Customize VS Code Preferences

1

Open Settings

Code → Preferences → Settings (Mac), File → Preferences → Settings (Windows).

2

Search to Find Settings

Type into the search field — e.g. 'tab size' to change indentation width.

3

Change the Default Font

Search 'font family' — add 'Source Code Pro,' at the start of the list.

4

Settings Sync

Sign in to sync settings, extensions, and keybindings across machines.

Build Web Development Skills at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches the modern web stack — VS Code is the editor used throughout.

Master the customization of Visual Studio Code with this tutorial, covering how to set preferences and change the default font.

Setting Preferences

  1. 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.

  2. 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:

  1. 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.
  2. In the search field type: font family

  3. 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