Oliver's Notes
Oliver's Notes / Uses / Macos / Visual Studio Code for Presentations

Visual Studio Code for Presentations

Presentation Profile

Use the following alias to launch Visual Studio Code with a separate presentation profile. The profile can omit extensions and customizations so the editor looks like what students will see. For example, I disable programming ligatures because students may not recognize them.

function codi() {
  local dir=~/.vscode-teaching
  if [[ ! -d $dir ]]; then
    echo "Creating $dir"
    mkdir -p "$dir"
  fi
  code --extensions-dir "$dir/extensions" --user-data-dir "$dir/data"
}

Delete the ~/.vscode-teaching directory (while VSCode is not running) to reset the profile. Or place it under version control so you can restore a saved configuration, such as one that uses the settings below.

There are VSCode Extensions that do this, but I have found them slow and unreliable.

codi stands for “Visual Studio Code in Instruction mode”.

You can run a VSCode instance with this profile side-by-side with a Visual Studio Code that is running the default profile, but they will have the same icon.

Launch Shortcuts

I generally launch this from Alfred keyword, rather than from the terminal. If you do this, use an absolute path e.g. /usr/local/bin/code instead of just code as above.

You can also use Automator to make it look like an app. Then the workflow for launching it will look the same as for students. (I have given it a different name and icon, but you can of course replace these.)

Visual Studio Code (presentation).app.zip

Settings

Visual Studio Code’s Screencast Mode shows clicks and keypress. Configure it to only show only keyboard shortcuts, and place them lower on the screen:

Screencast Mode: Only Keyboard Shortcuts → true Screencast Mode: Vertical Offset → 2 (e.g.)

Other useful setting overrides for presentations:

Editor: Font Size Window: Zoom Level

Not specific to presentations: I generally instruct students to install the following extension:

and override the following settings:

Files: Auto Save → onFocusChange Editor: Format on Save → enabled Files: Insert Final Newline → enabled Files: Trim Final Newlines → enabled Files: Trim Trailing Whitespace → enabled JavaScript > Suggest → disabled Live Server > Settings: Custom Browser → chrome