Configuring VS Code for CS50

Welcome! Looking to set up VS Code for your section or lab?

no_file.png

Tools needed

Before the Semester Begins

You should only need to complete these steps once.

Prepare your Computer

  • Mac
    • Create a new user strictly for teaching. You’ll log in as this user every time you teach.
      • Go to System Preferences > Users & Groups. Click the + icon to add a user.
      • Name your user something fun, like “yourname50”!
    • Log in to your new user and update their display settings.
      • Go to System Preferences > Displays. display_settings.png
      • Click “Night Shift…” and ensure Schedule is set to “Off”. This avoids an orange haze during presentations. night_shift.png
      • Ensure True Tone is always disabled (unchecked). This avoids tinting your screen during presentations.
    • Clean your top-right menu bar to avoid visual clutter.
      • Hold Cmd and drag all non-essential icons from the top-right menu bar. This might include apps that are running in the background, such as Zoom, Adobe Creative Cloud, etc.
  • Windows
    • Create a new user strictly for teaching. You’ll log in as this user every time you each.
      • Go to Settings > Add, edit or remove other users.
      • Under “Other users” click “Add someone else to this PC”
      • If prompted to login with or create a Microsoft account, skip by indicating “I don’t have this person’s sign-in information” and “Add a user without a Microsoft account”.
      • Name your user something fun, like “yourname50”!
    • Go to Settings > System > Display
      • Ensure Night light is turned off.

Prepare VS Code

  • Log in to your computer as your user for section/lab.
  • Open Google Chrome.
  • Log in to code.cs50.io.
  • Set your workspace theme to GitHub Light Default.
    • Click the gear icon, your settings, in the bottom-left corner.
    • Search for “theme” in settings.
    • Ensure Workbench: Color Theme is set to “GitHub Light Default”. theme.png
  • Update your settings.json to remove unnecessary scrollbars and terminal buttons.
    • To open your setting.json, first open your settings. You can switch to a settings.json view by clicking the top-right file button with an arrow in the top-left.
    • With your settings.json open, copy and paste the following configurations.
      {
        "editor.scrollbar.verticalScrollbarSize": 0,
        "editor.scrollbar.horizontalScrollbarSize": 0,
        "terminal.integrated.tabs.showActions": "never",
        "terminal.integrated.tabs.showActiveTerminal": "never",
        "workbench.colorCustomizations": {
          "editor.lineHighlightBackground": "#ffffff"
        }
      }
      
    • You should see that your file scrollbar is invisible, your terminal buttons have been simplified, and that line highlighting is disabled.
  • On Mac, hide Chrome’s URL bar in Full Screen. This is not necessary for Windows.
    • Find View > Always Show Toolbar in Full Screen. Uncheck the setting.
  • Set magnification to between 200 and 300 percent.
    • Use Cmd or Ctrl and +.

Pre-Class Checklist

These steps help ensure VS Code is ready to go for your class.

  • Open Google Chrome.
  • Log into code.cs50.io.
  • Check that your theme is set to GitHub Light Default.
  • Ensure only the Terminal tab is showing in bottom window (not Ports, Problems, Debug Console, etc.).
    • Right click on the terminal title bar
    • Uncheck all but “Terminal”
  • Ensure your Activity Bar and File Explorer are closed.
    • Drag the File Explorer’s edge to the very far left to close the File Explorer file_explorer_line.png
    • Open the Command Pallette using the settings gear or your system’s shortcut
    • Search for “Toggle Activity Bar Visibility…” and activate the setting.
  • Ensure magnification is set between 200 and 300 percent.
  • Ensure VS Code is in full screen.
    • Use F11 on Windows, or the green full-screen button on Mac.
  • Ensure the URL bar is hidden.
  • Hide all previous code files in a . folder, such as .tmp