How to Record VS Code for Coding Tutorials

Recording VS Code sessions for coding tutorials requires a different approach than recording general screencasts. Your viewers need to read code clearly, follow cursor movements across multiple files, and understand terminal output — all while listening to your narration. The wrong recording setup produces unwatchable videos with blurry text, tiny fonts, and lost cursor positions.

This guide covers four recording methods optimized for code content, from quick captures to professional multi-panel streaming setups.

Quick Comparison

Before You Record: VS Code Setup

Regardless of which recording tool you choose, prepare VS Code for optimal recording quality:

Font size: Open Settings (⌘ Cmd + ,) and set editor.fontSize to 16-18. The default 12-14px becomes unreadable at 1080p playback. For terminal, set terminal.integrated.fontSize to 16.

Theme: Switch to a high-contrast theme. GitHub Dark Default, One Dark Pro, or Dracula provide clear syntax highlighting that reads well on compressed video. Avoid light themes — they cause eye strain for viewers watching tutorials and produce larger file sizes due to less video compression efficiency on bright backgrounds.

Minimap: Disable it via editor.minimap.enabled: false. The minimap is visual noise in recordings — viewers can't read it anyway, and it takes up 10% of your editor width.

Distracting extensions: Temporarily disable extensions with heavy UI overlays — GitLens inline blame, Error Lens inline errors, bracket colorizers with many colors. Keep them if they're relevant to your tutorial content, but disable if they add clutter.

Layout: Press ⌘ Cmd + B to toggle the sidebar closed if you don't need the file explorer visible. Use ⌘ Cmd + J to show/hide the terminal panel. Plan which panels you need visible for your tutorial and hide everything else.

Method 1: macOS Screenshot Toolbar

The fastest option for recording a quick code walkthrough or PR explanation without installing anything.

Step 1: Arrange VS Code Window

Position VS Code to fill your screen or a specific portion. If recording at 1080p, resize the window to exactly 1920x1080 using a window manager like Rectangle (⌃ Ctrl + ⌥ Option + Return for fullscreen). This ensures your recording resolution matches your window.

Step 2: Open Screenshot Toolbar

Press ⌘ Cmd + Shift + 5. Select Record Entire Screen (for fullscreen VS Code) or Record Selected Portion (to crop to just the editor). Click Options and select your microphone for narration.

Step 3: Record Your Session

Click Record, then work through your tutorial in VS Code. Navigate files with ⌘ Cmd + P (Quick Open), use ⌘ Cmd + Shift + F for project-wide search, and toggle the terminal with ⌘ Cmd + J. Speak clearly and move at a deliberate pace.

Step 4: Stop and Export

Click the Stop button in the menu bar or press ⌘ Cmd + Control + Escape. The .mov file saves to your Desktop. Trim in QuickTime Player if needed (⌘ Cmd + T).

Limitations: No zoom effects (code stays at fixed scale), no cursor highlighting, no webcam overlay, no system audio. The .mov output is uncompressed and large. Suitable for quick internal shares, not polished tutorials.

Method 2: Screenify Studio — Auto-Zoom on Code

Screenify Studio's auto-zoom and cursor highlighting features solve the two biggest problems in coding tutorials: viewers losing track of the cursor in a wall of code, and text being too small to read without manually zooming in post-production.

Step 1: Select Capture Area

Open Screenify Studio and choose your capture mode. For VS Code tutorials, Window Capture targeting the VS Code window works best — it ignores other desktop distractions and captures exactly what viewers need to see. Alternatively, use Full Screen if you switch between VS Code and a browser during the tutorial.

Step 2: Enable Auto-Zoom

Turn on Auto-Zoom in recording settings. When you're writing code, the zoom automatically follows your cursor position — as you type on line 45, viewers see a smoothly zoomed view of that area. When you jump to a different file or scroll to another function, the zoom follows. This eliminates the "tiny text" problem without any manual editing afterward.

Step 3: Configure Cursor Highlight

Enable cursor highlighting so viewers can instantly locate your cursor position in dense code. This is critical for coding tutorials where you might have 40+ lines visible — without highlighting, viewers constantly lose track of which line you're referencing in your narration.

Step 4: Audio Setup

Enable your microphone for narration. If your tutorial involves running code that produces audio output (a web app with sounds, a media player), enable System Audio capture to include those sounds. Screenify Studio captures both simultaneously without requiring third-party audio routing.

Step 5: Record and Export

Start recording, then code normally in VS Code. Open files, write code, run terminal commands, switch tabs. The auto-zoom handles all the visual emphasis automatically. When done, stop recording and export. Metal-accelerated encoding on Apple Silicon means fast exports even for long tutorial sessions.

Why this works for coding tutorials: Code editors present unique recording challenges — the text is small, the cursor is thin, and viewers need to read syntax-highlighted code clearly. Auto-zoom magnifies wherever you're working, and cursor highlight ensures viewers never lose your position. The result looks like a professionally edited tutorial without post-production work.

Method 3: OBS Studio — Multi-Panel Setup

OBS excels when your coding tutorial needs to show VS Code, a terminal, and a browser preview simultaneously — like building a web app where viewers need to see code changes reflected in real-time.

Step 1: Create Your Scene Layout

Open OBS and create a new Scene called "Coding Tutorial." Plan your layout before adding sources. A common arrangement for coding tutorials:

• Main area (70% width): VS Code editor
• Right panel (30% width): Browser preview or terminal
• Small corner: Webcam (optional)

Step 2: Add VS Code Window Source

Click + in Sources → Window Capture → select the VS Code window. Resize it to occupy the main area of your canvas. Use Edit → Transform → Edit Transform (⌘ Cmd + E) to set precise pixel positions if needed.

Step 3: Add Terminal or Browser Source

Add a second Window Capture for your terminal app (Terminal.app, iTerm2, Warp) or browser window showing your app's output. Position it in the remaining space. Use Edit → Transform → Crop to remove window title bars for a cleaner look.

Step 4: Configure Multiple Scenes (Advanced)

For tutorials with distinct phases, create multiple scenes:

• Scene 1: "Code Only" — VS Code fullscreen for focused coding
• Scene 2: "Code + Preview" — Side-by-side editor and browser
• Scene 3: "Terminal" — Full terminal for installation/build steps

Use Studio Mode to preview scenes before switching, or assign hotkeys (Settings → Hotkeys) for instant scene transitions during recording.

Step 5: Audio Configuration

In Settings → Audio, set your microphone as the primary input. For system audio on macOS, install BlackHole (free virtual audio driver) and select it as a Monitor Audio Device. This captures terminal bells, browser notification sounds, or any audio from your running application.

Step 6: Recording Settings

Configure output for code clarity:

• Encoder: Apple VT H264 Hardware Encoder
• Resolution: 1920x1080 minimum (2560x1440 if recording 4K content)
• FPS: 30 (sufficient for coding; saves file size)
• Rate Control: CBR at 8000-12000 kbps (higher bitrate preserves text sharpness)
• Format: MKV (remux to MP4 after recording via File → Remux Recordings)

Higher bitrate is essential for code content. Video compression algorithms struggle with sharp text against flat backgrounds — low bitrate causes smearing on syntax-highlighted code.

Step 7: Record

Click Start Recording, work through your tutorial switching scenes as needed, and click Stop Recording when finished. Remux the MKV to MP4 for broad compatibility.

Best for: Multi-window tutorials (full-stack development, DevOps workflows), live coding streams on Twitch/YouTube, and recordings where you need scene transitions between different tool views.

Method 4: asciinema — Terminal-Only Text Recording

asciinema takes a completely different approach: instead of recording pixels, it records terminal input/output as text. The result is a lightweight, text-selectable recording that viewers can copy code from directly.

Step 1: Install asciinema

brew install asciinema

Step 2: Start Recording

asciinema rec my-tutorial.cast

This launches a new shell session that records everything. Your terminal works normally — run commands, edit files with vim/nano, use interactive tools.

Step 3: Work Through Your Tutorial

Execute your commands at a teaching pace. asciinema captures exact timing, so pauses feel natural on playback. If you make a mistake, just fix it — viewers will see the real workflow including corrections, which is often more educational than a perfect run.

Step 4: Stop and Share

Press ⌃ Ctrl + D or type exit to finish recording. Upload to asciinema.org:

asciinema upload my-tutorial.cast

Or self-host the recording by embedding the .cast file with the asciinema player JavaScript widget on your site.

Step 5: Convert to Video (Optional)

If you need a standard video file from your asciinema recording:

# Install agg (asciinema gif generator)
brew install asciinema/tap/agg

# Convert to gif
agg my-tutorial.cast my-tutorial.gif

# Or use svg-term for SVG animation
npx svg-term --in my-tutorial.cast --out my-tutorial.svg

Ideal use cases: CLI tool documentation, installation guides, shell scripting tutorials, DevOps workflows. Viewers can pause and copy commands directly from the recording — something impossible with video recordings.

Limitations: Terminal only — cannot show VS Code's GUI, browser windows, or any graphical interface. No audio narration. Not suitable for tutorials that involve IDE features, debugging with breakpoints, or visual UI work.

Tips for Recording Better Coding Tutorials

Font Size and Readability

The single most common mistake in coding tutorial recordings is small text. Set VS Code to 16-18px font size and verify readability by watching a 10-second test recording on your phone. If you can't read code on a phone screen, your viewers watching on laptops will struggle too.

Keyboard Shortcut Overlay

Help viewers learn shortcuts by showing what keys you press. In VS Code, install the Screencast Mode built-in feature: open Command Palette (⌘ Cmd + Shift + P) → "Toggle Screencast Mode." This displays keystrokes in an overlay at the bottom of the editor window — viewers see exactly which shortcuts you use.

Code Preparation Strategy

For tutorials longer than 5 minutes, prepare intermediate checkpoints. Create git branches for each tutorial section (step-1-setup, step-2-routing, step-3-database) so you can jump to any point if you make an unrecoverable mistake. This saves re-recording the entire session.

Terminal Output Management

Clear your terminal between conceptually separate commands using ⌘ Cmd + K (clear scrollback). Long terminal output from build processes or test suites pushes relevant content off screen — clear before the next meaningful command so viewers see context.

Pacing and Dead Air

New tutorial creators often code too fast. Aim for half your normal coding speed. After typing a significant block, pause for 2-3 seconds before explaining what you wrote. This lets viewers read the code before your narration begins. When running commands, wait for output to complete before speaking about results.

Window and Tab Organization

Before recording, close all VS Code tabs except the ones relevant to your tutorial. Open only the files you'll reference. In the terminal, clear your shell history so ↑ arrow doesn't reveal unrelated commands. Set your terminal prompt to something short — long prompts with git branch, node version, and path waste horizontal space.

Troubleshooting

Code Text Appears Blurry or Smeared in Recording

This is the most common issue with coding tutorials. The cause is insufficient bitrate — video codecs compress sharp text aggressively. Fix by increasing your encoder bitrate to 8000+ kbps in OBS (Settings → Output → Video Bitrate). For Screenify Studio, select the "High Quality" export preset. If using macOS Screenshot Toolbar, the default ProRes codec preserves text sharpness but produces large files.

VS Code Cursor Is Invisible in Playback

The default VS Code cursor is a thin 1px line that disappears in compressed video. Open Settings (⌘ Cmd + ,) and set editor.cursorWidth to 3 or 4 for a thicker cursor. Also set editor.cursorBlinking to "expand" for a more visible animation. If your recording tool supports cursor highlighting, enable it for an additional glow effect around the cursor position.

Recording Drops Frames When Running Builds or Compiling

Heavy CPU usage from builds (webpack, TypeScript compiler, Docker) competes with your recording tool for resources. Solutions: (1) Record at 30fps instead of 60fps to reduce encoder load. (2) Use hardware encoding (Apple VT H264 in OBS) instead of software x264. (3) Pre-build before recording and show only the output, not the build process. (4) On Apple Silicon Macs, this is less common — the dedicated media engine handles encoding separately.

System Audio Captures Notification Sounds

macOS notification sounds bleed into system audio recordings — Slack pings, calendar alerts, and mail notifications appear in your tutorial audio. Before recording, enable Do Not Disturb (⌃ Control + click the clock in menu bar → Focus → Do Not Disturb). Alternatively, run defaults write com.apple.notificationcenterui NotificationCenterUIController NO to temporarily silence all notifications.

Terminal Prompt Takes Too Much Horizontal Space

Long shell prompts with git branch, Python virtualenv, node version, and full path consume 40-60 characters per line, leaving little room for actual commands. For recording sessions, temporarily switch to a minimal prompt: export PS1="$ " in bash/zsh. This gives viewers maximum command visibility. Restore your normal prompt after recording by opening a new terminal window.

FAQ

Q: What resolution should I record coding tutorials at?

Record at 1080p minimum. For tutorials with dense code or split panels, 1440p (2560x1440) gives viewers more readable text when they watch fullscreen. If you record at 4K, most platforms downscale to 1080p for delivery, but the extra source resolution means sharper text after compression.

Q: How do I keep my cursor visible in a wall of code?

Three approaches: (1) Enable VS Code's cursor blinking animation set to "expand" (editor.cursorBlinking: "expand") for a more visible cursor. (2) Use a recording tool with cursor highlighting like Screenify Studio. (3) In VS Code, enable "Screencast Mode" which shows a highlight around the current line. Combine approaches for maximum visibility.

Q: Should I record with or without a webcam for coding tutorials?

For educational tutorials (YouTube, courses), a webcam builds rapport with viewers — show your face in an intro, then hide the webcam during code-heavy sections. For quick team walkthroughs or PR explanations, skip the webcam. For recorded code reviews with commentary, a small webcam overlay adds personality without obscuring code.

Q: How do I handle mistakes during recording?

Don't restart — mistakes are educational. If you make a typo, fix it naturally. If you hit an unexpected error, debug it on camera and explain your thought process. Viewers learn more from watching real problem-solving than from a perfect scripted run. For truly derailing errors, pause recording, fix the issue, and resume with a brief explanation of what happened.

Q: What's the ideal length for a coding tutorial?

YouTube analytics consistently show retention drops after 10-12 minutes for coding content. Break long topics into a series: "Building a REST API — Part 1: Setup (8 min), Part 2: Routes (10 min), Part 3: Database (10 min)." Each video should cover one complete concept that works independently.

Q: How do I record VS Code with both editor and terminal visible?

In VS Code, press ⌘ Cmd + J to toggle the integrated terminal panel. Drag the panel border to allocate roughly 30% height to terminal, 70% to editor. This way, one recording captures both code editing and command execution without switching windows. For separate terminal recordings, see Method 3 (OBS multi-panel) or use VS Code's side-by-side terminal layout (⌘ Cmd + \ in the terminal panel).

Q: Do I need to edit my coding tutorial recordings?

Minimal editing improves quality significantly: trim dead air at the beginning/end, cut out long package installation waits (add a "Installing... this takes 2 minutes" text card), and remove any accidental desktop notification popups. Tools like Descript let you edit video by editing the transcript text — delete a sentence from the transcript, and the corresponding video segment is removed.

Q: How do I capture VS Code extension interactions (debugger, git panel)?

All screen recording methods capture whatever VS Code displays — including the debugger panel, Source Control view, Extensions marketplace, and Settings UI. Position the relevant panel on-screen before starting that section of your tutorial. For the debugger, set breakpoints in advance and use F5 to start debugging during recording. The auto-zoom feature in dedicated recording tools helps viewers focus on the active panel.

The best tool for recording coding tutorials depends on your content complexity. For quick code explanations and PR walkthroughs, macOS Screenshot Toolbar handles basics. For polished tutorials where viewers need to clearly read every line of code, Screenify Studio's auto-zoom and cursor tracking eliminates the readability problem. OBS handles complex multi-panel setups, and asciinema serves the niche of terminal-only content where text selectability matters.

Explore more recording techniques for developers in our guide to the best screen recorders for developers and learn about general Mac screen recording options.