Configuring VS Code for CS50

• Tools needed
• Before the Semester Begins
  • Prepare your Computer
  • Prepare VS Code
• Pre-Class Checklist

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

Tools needed

• Google Chrome

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 Add Account... 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.
    • Click “Night Shift…” and ensure Schedule is set to “Off”. This avoids an orange haze during presentations.
    • 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.
  • Adjust your power settings. Ensure that your display is set to never go to sleep (at least while logged in as your teaching user!).
• 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”. If you don’t have this theme installed, go to the Extension menu, then search for and install for “GitHub Theme”.
• 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
  • 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