🎨 Lesson 5 of 40 Customization Beginner

Settings, Themes & Customization

VS Code is one of the most customizable editors ever built. In this lesson we configure settings, pick a theme, adjust fonts, and sync everything across machines.

12% complete

1User Settings vs Workspace Settings

VS Code has two layers of settings: User settings apply globally to every project, while Workspace settings are stored in a .vscode/settings.json file inside your project and override user settings for that workspace only. Open settings with Ctrl+,.

2Essential Settings to Configure First

settings.json — recommended starter config

{
  "editor.fontSize": 15,
  "editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay"
}

3Choosing a Colour Theme

Press Ctrl+K Ctrl+T to open the theme picker with a live preview. Popular themes include:

One Dark Pro — the most-downloaded theme of all time
GitHub Dark / Light — clean, GitHub-inspired
Catppuccin — pastel, easy on the eyes
Dracula — classic dark theme
Tokyo Night — modern dark with vibrant syntax colours

4Choosing a Font

Programming fonts with ligatures make code much easier to read. Top choices:

JetBrains Mono — free, excellent ligatures
Fira Code — the original ligature font
Cascadia Code — Microsoft's own coding font
Monaspace — GitHub's new font family

5Settings Sync

Enable Settings Sync (the cloud icon in the Activity Bar) to sync your settings, keybindings, extensions, snippets and UI state across all your machines via your GitHub or Microsoft account — instantly.

💡 Tip: Use Profiles (File › Preferences › Profiles) to keep separate configs for, say, Python data-science work vs web development. Each profile has its own settings, extensions and keybindings.