Useful Visual Studio Code settings for better coding demos
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.
"editor.cursorStyle": "block"

2️⃣ Expand cursor instead of blink
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.
"editor.cursorBlinking": "expand"

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.
"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.
"workbench.colorCustomizations": { "editorCursor.foreground": "#ff0000"}

Putting it all together
To apply all these settings at once, add them to your settings.json
file in VS Code:
{ "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!
Related articles
Use command URI in a VSCode webview to open files and links
In this article, Elio shows how to use command URI to open files and links in a webview from a Visual Studio Code extension.
Publishing web projects from Visual Studio Code to Azure with Git
SharePoint Framework snippets extension for Visual Studio Code
Report issues or make changes on GitHub
Found a typo or issue in this article? Visit the GitHub repository to make changes or submit a bug report.
Comments
Let's build together
Manage content in VS Code
Present from VS Code