Low-Distraction Demos with Visual Studio Code

I'm a big fan of Visual Studio Code. The folks at Microsoft built an amazing editor and continue to add features at a blistering pace. It's great for writing code right out of the box and, with a few small tweaks, it's also a very good tool for code demos.

Features like code completion support, parameter hints, and hovering tool tips are great when you're writing code alone, but they can be a distraction when you're using your editor to demo code for others. Small pop-up windows are constantly appearing and disappearing every few keystrokes.

The goal of just about every demo is to teach and I think you make learning easier when you remove as many distractions as possible while maintaining as much context as is useful. It's a balancing act. I'm constantly tweaking my Visual Studio Code settings to try to find the right balance.

A few of my current demo settings are presented below. These will get rid of most of the popup windows that appear while typing. The downside is you need to know exactly what to type and be able to do it with few errors. Thankfully, Visual Studio Code also includes excellent support for code snippets and you can enable completion of snippets with the "tab" key even if you've turned off other code completion features.

This is not an exhaustive list of the settings I use for demos - just a few that I think can reduce distractions. There are others that are equally important such as font size, zoom level, and anything that can affect the amount of screen real estate you have available for code.

{
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  "editor.parameterHints.enabled": false,
  "editor.wordBasedSuggestions": false,
  "editor.selectionHighlight": false,
  "editor.suggestOnTriggerCharacters": false,

  "editor.hover.enabled": false,

  "editor.tabCompletion": "onlySnippets"
}
Author image
About Brice Wilson
Software Developer and Trainer