How to Record VS Code
Record VS Code with readable fonts, keyboard overlay, and clean layouts. Guide for code tutorials, PR walkthroughs, and developer onboarding videos.
When you’d need to record VS Code
Code review walkthroughs
Walk through a PR file by file, explaining your changes. Faster than writing 20 inline comments, and reviewers hear your reasoning instead of guessing intent from diff context.
Bug reproduction for issue reports
Record yourself triggering the bug in VS Code — show the file, the terminal output, the error in the Problems panel. Developers watching the issue get full context without back-and-forth comments.
Coding tutorials and course content
Record multi-file editing sessions where you jump between files, use the integrated terminal, and demonstrate extensions. VS Code is the most-used editor for tutorial content.
Onboarding new developers to a codebase
Record a walkthrough of the project structure, key files, and how to run the dev server. New hires rewatch it instead of asking the same setup questions.
Recommended settings
Things to know
- •VS Code's default font size is 12px — unreadable in a recording at 1080p after compression
- •The integrated terminal panel shares the window — if you're showing code and terminal together, both need to be legible
- •Dark themes (the default) record well but some syntax colors like dark blue on dark gray vanish after video compression
- •Extensions that show notification popups (GitLens, Error Lens) can clutter the recording with unexpected overlays
Step-by-step
- 1
In Screenify Studio, select Window Capture and pick the VS Code window.
Enable keyboard overlay so viewers can follow your shortcuts.
- 2
Open VS Code and increase the editor font size to at least 16px: open Settings (Cmd+,), search 'Font Size', set Editor: Font Size to 16. Also increase Terminal: Font Size to 14. These defaults (12px) are unreadable in recordings.
- 3
Check your color theme. Open Command Palette (Cmd+Shift+P) > 'Color Theme'. Avoid themes with low-contrast syntax colors — if dark blue keywords on a dark gray background are hard to read on your monitor, they'll be invisible in a recording. 'One Dark Pro' or 'GitHub Dark' have good video contrast.
- 4
Close sidebar panels you won't reference. Press Cmd+B to toggle the sidebar. If you need the file explorer, keep it open but collapse sections (Outline, Timeline) you won't use — less visual noise.
- 5
Start recording. Move between files deliberately — Cmd+P (Quick Open) with visible file names is easier to follow than clicking through the file tree. Pause 2-3 seconds after opening a new file so viewers can orient themselves.
For code + terminal split recordings
- 6
Split VS Code vertically: drag a file tab to the right side of the editor to create a side-by-side view. This works well for showing a component and its test file simultaneously.
- 7
Open the integrated terminal with Cmd+` (backtick). Resize the terminal panel to about 30% of the window height — enough to see command output without hiding code.
- 8
Run your command (npm test, git diff, etc.) in the terminal while the code is visible above. This shows cause-and-effect in one frame.
- 9
Use Cmd+Shift+M to open the Problems panel if you're demonstrating linting errors or TypeScript issues. The Problems panel lists errors with file:line references that auto-zoom can highlight.
Pro tips
Keyboard overlay is essential for code tutorials. When you press Cmd+Shift+P to open Command Palette, Cmd+D to multi-select, or Cmd+Shift+L to select all occurrences — viewers can't see your hands. Keyboard overlay shows each shortcut on screen as you press it. Without it, your code just magically changes and viewers can't follow.
Auto-zoom on the Problems panel. VS Code's Problems panel (Cmd+Shift+M) shows errors in 12px text with file paths, line numbers, and error codes. Auto-zoom detects your click on a specific error and zooms in so viewers can actually read 'Type string is not assignable to type number' instead of a blurry line.
Use Screenify's silence detection for long coding sessions. A 30-minute coding session has 5-10 minutes of you silently reading code, waiting for builds, or thinking. Silence detection marks these gaps so you can cut them in the timeline editor — turning 30 minutes into a tight 20-minute video.
Disable notification extensions before recording. GitLens inline blame annotations, Error Lens inline errors, and GitHub Copilot suggestions all create visual noise. Disable them temporarily: Cmd+Shift+P > 'Disable All Extensions' for a clean recording, or selectively disable the noisy ones.
Common mistakes
Using the default 12px font size. This is the #1 mistake in VS Code recordings. After video compression, 12px monospace text becomes an unreadable blur. Your viewers pause, squint, and give up. Set editor font to 16px and terminal font to 14px before recording.
Switching files too fast with Cmd+P. You know your codebase — viewers don't. When you Cmd+P to 'UserService.ts', pause 3 seconds on the file so viewers can read the filename, understand the file structure, and orient themselves before you start explaining code.
Recording with Copilot suggestions enabled. GitHub Copilot's inline ghost text appears and disappears constantly as you type. In a recording, it's distracting visual noise that has nothing to do with your actual tutorial. Disable Copilot inline suggestions before recording.
Showing the full file tree with node_modules visible. If your Explorer sidebar shows a collapsed node_modules folder, 47 config files, and .git internals, it's visual clutter. Use VS Code's 'files.exclude' setting or collapse everything except the folders you'll reference.
Related apps
Related guides
Record Software Tutorials
Educators, YouTubers, course creators, and developer advocates who produce instructional content
Record Bug Reports
QA engineers, developers, product managers, and support agents who file or triage bugs
Record Code Reviews
Senior developers, tech leads, and engineering managers who review pull requests regularly
Record Onboarding Videos
Engineering managers, HR teams, team leads, and operations staff who onboard new employees or contractors
Record Tool Comparison Videos
Tech reviewers, affiliate marketers, YouTube creators, and consultants who evaluate software for clients
Record Training Course Content
Course creators, bootcamp instructors, corporate trainers, and educators building learning content on platforms like Udemy, Teachable, or internal LMS
Record VS Code with Screenify Studio
AI auto-zoom on clicks, instant captions in 50+ languages, cursor highlighting, and studio-grade export. Free plan, no watermark.
Try Screenify Free
