#OpenToWork

Available for new opportunities! Let's build something amazing together.

Get in touch

Useful Visual Studio Code settings for better coding demos

post

When delivering a coding demo, clarity and visibility are key. You want your audience to follow along effortlessly without losing track of where your cursor is or getting distracted by unnecessary UI elements. Of course, we all know it’s best to use a light theme to improve readability, but there are additional settings that can make your live coding sessions even smoother. Here are some Visual Studio Code settings that can enhance the experience.

1️⃣ Show the cursor as a block

By default, Visual Studio Code uses a thin blinking cursor, which can be hard to spot during demos. Changing it to a block cursor makes it more visible.

1
"editor.cursorStyle": "block"
Show image Block cursor in Visual Studio Code
Block cursor in Visual Studio Code

Another way to make the cursor more noticeable is to expand it instead of a blinking one. This setting can help your audience track your cursor more easily.

1
"editor.cursorBlinking": "expand"
Show image Expand animation for the cursor
Expand animation for the cursor

3️⃣ Disable editor hovers

Visual Studio Code tooltips and hovers (like those from extensions such as GitLens) can be useful for development but may clutter the screen during a demo. Disabling them helps maintain focus.

1
"editor.hover.enabled": false

4️⃣ Give the cursor a custom color

A high-contrast cursor color ensures it’s always easy to spot, even in different themes or under screen sharing conditions.

1
2
3
"workbench.colorCustomizations": {
  "editorCursor.foreground": "#ff0000"
}
Show image Change color to a high-contrast version
Change color to a high-contrast version

Putting it all together

To apply all these settings at once, add them to your settings.json file in VS Code:

1
2
3
4
5
6
7
8
{
  "editor.cursorStyle": "block",
  "editor.cursorBlinking": "expand",
  "editor.hover.enabled": false,
  "workbench.colorCustomizations": {
    "editorCursor.foreground": "#ff0000"
  }
}

Why these settings matter

A good coding demo is all about making things as clear as possible for your audience. These settings help by:

  • ✅ Making the cursor more visible
  • ✅ Reducing unnecessary distractions
  • ✅ Ensuring your code remains the focus

Try these settings before your next demo and see the difference!

Comments

Back to top