Skip to content

VS Code Setup Guide

Visual Studio Code (VS Code) is a free, powerful, and extensible code editor that we use in the lab for development work. This guide will walk you through installing and configuring VS Code.

Installation

Windows

  1. Download VS Code
  2. Visit https://code.visualstudio.com/
  3. Click the "Download for Windows" button

  4. Run the downloaded installer (VSCodeUserSetup-{version}.exe)

  5. Installation Options

  6. ✅ Check "Add to PATH" (important for command-line usage)
  7. ✅ Check "Create a desktop icon" (optional but convenient)
  8. ✅ Check "Register Code as an editor for supported file types"

  9. ✅ Check "Add 'Open with Code' action to context menu"

  10. Complete Installation

  11. Click "Install" and wait for the installation to complete
  12. Launch VS Code

macOS

  1. Download VS Code
  2. Visit https://code.visualstudio.com/
  3. Click "Download for Mac"

  4. Open the downloaded .zip file

  5. Install

  6. Drag Visual Studio Code.app to the Applications folder

  7. Launch VS Code from Applications or Spotlight

  8. Add to PATH (for command-line usage)

  9. Open VS Code
  10. Press Cmd+Shift+P to open the Command Palette
  11. Type "shell command" and select "Shell Command: Install 'code' command in PATH"

Initial Configuration

Basic Settings

  1. Open Settings
  2. Go to File → Preferences → Settings (or Code → Preferences → Settings on macOS)

  3. Or press Ctrl+, (Windows/Linux) or Cmd+, (macOS)

  4. Recommended Settings

Search for and configure these settings:

  • Auto Save: Search for "Auto Save" and set to afterDelay
  • Tab Size: Search for "Tab Size" and set to 4 (or 2 for web development)
  • Format On Save: Search for "Format On Save" and enable it
  • Trim Trailing Whitespace: Search for "Trim Trailing Whitespace" and enable it
  • Files: Insert Final Newline: Enable to ensure files end with a newline

Font and Appearance

  1. Font Settings
  2. Search for "Font Family" and set your preferred monospace font
  3. Popular options: 'Fira Code', 'Consolas', 'Monaco', 'Courier New'

  4. For ligatures with Fira Code, enable "Font Ligatures"

  5. Theme

  6. Press Ctrl+K Ctrl+T (Windows/Linux) or Cmd+K Cmd+T (macOS)
  7. Choose a color theme (popular: Dark+, Monokai, Dracula)

Terminal Configuration

  1. Integrated Terminal
  2. Open terminal: Ctrl+` (backtick)

  3. Configure default shell in Settings under "Terminal > Integrated > Default Profile"

  4. Windows Users: Consider setting up Windows Terminal or Git Bash for a better terminal experience

Keyboard Shortcuts

Learn these essential keyboard shortcuts:

Universal

  • Ctrl+P / Cmd+P: Quick file open
  • Ctrl+Shift+P / Cmd+Shift+P: Command palette
  • Ctrl+B / Cmd+B: Toggle sidebar
  • Ctrl+` / Cmd+`: Toggle terminal
  • Ctrl+/ / Cmd+/: Toggle line comment

Editing

  • Alt+Up / Alt+Down: Move line up/down
  • Shift+Alt+Up / Shift+Alt+Down: Copy line up/down
  • Ctrl+D / Cmd+D: Add selection to next find match
  • Ctrl+Shift+L / Cmd+Shift+L: Select all occurrences of current selection
  • Ctrl+Tab: Switch between open files
  • F12: Go to definition
  • Alt+Left / Alt+Right: Navigate back/forward

Settings Sync

Enable Settings Sync to keep your configuration across devices:

  1. Click the gear icon (⚙️) in the bottom-left corner
  2. Select "Turn on Settings Sync"
  3. Sign in with GitHub or Microsoft account
  4. Choose what to sync (settings, extensions, keybindings, etc.)

Next Steps

Troubleshooting

VS Code won't launch

  • Windows: Try running the installer as administrator
  • macOS: Check that the app is in the Applications folder
  • Linux: Verify the installation with code --version

Extensions not installing

  • Check your internet connection
  • Try disabling your firewall temporarily
  • Reload VS Code: Press Ctrl+Shift+P and run "Developer: Reload Window"

More Issues?

See the Troubleshooting Guide or visit VS Code Documentation