iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

UI Tour

A guided tour of the VS Code UI: side bar, panel, editor groups, command palette, and the muscle memory that makes you fast.

VS Code — UI tour

EXAMPLE
# ===== The main surfaces =====
# Title bar      window controls + workspace name
# Activity bar   left-side icons: Explorer, Search, Source Control, Run + Debug,
#                Extensions, Account, Manage (gear)
# Side bar       contents of the active activity (e.g. file tree under Explorer)
# Editor groups  the panes where files open
# Panel          bottom area: Terminal, Output, Problems, Debug Console, Ports
# Status bar     branch, errors, line/col, language mode, encoding

# ===== Cmd / Ctrl bindings to memorise =====
# Cmd+P / Ctrl+P             Quick Open (file picker)
# Cmd+Shift+P / Ctrl+Shift+P Command Palette (every action)
# Cmd+B / Ctrl+B             toggle side bar
# Cmd+J / Ctrl+J             toggle panel
# Cmd+\ / Ctrl+\             split editor
# Cmd+1/2/3                  focus editor group 1/2/3
# Cmd+W / Ctrl+W             close editor
# Cmd+T / Ctrl+T             workspace symbols
# F12                        go to definition
# Alt+F12                    peek definition
# Shift+F12                  find all references
# Cmd+. / Ctrl+.             Quick fix / code actions
# F2                         rename symbol
# Cmd+Shift+F                find in files
# Cmd+Shift+H                replace in files
# Ctrl+\`                     toggle integrated terminal

# ===== Multi-cursor =====
# Alt+Click                  add cursor at click
# Cmd+Option+Down/Up         add cursor on next/prev line
# Cmd+D                      select next occurrence (then repeat)
# Cmd+Shift+L                select ALL occurrences

# ===== Side-by-side diff =====
# Cmd+P then type 'diff' -> 'Compare Active File with...'
# Or: select two files in Explorer -> right-click -> Compare Selected

# ===== Source control =====
# Stage hunks: hover the diff line numbers in the Source Control side bar
# Inline blame: install GitLens; hover the line for author + commit

# ===== Tasks =====
# .vscode/tasks.json — define build / test / lint runners
# Run: Cmd+Shift+P -> 'Run Task'
# Bind a task to a key in keybindings.json

# ===== Debugging =====
# .vscode/launch.json — configure the debugger
# F5: start; F10/F11: step over / into; Shift+F5: stop

# ===== Settings sync =====
# Account icon (bottom-left) -> Turn on Settings Sync
# Syncs keybindings, settings, snippets, extensions across machines

# ===== Workspaces =====
# Multi-root workspaces (.code-workspace) for monorepos with several roots
# File -> Add Folder to Workspace

# ===== Patterns to internalise =====
# - Command Palette is your friend; reach for it before clicking
# - Cmd+P + filename fuzzy match > clicking through the tree
# - Multi-cursor for refactors before reaching for a regex
# - Integrated terminal stays in-context with the editor

# ===== Pitfalls =====
# - Closing files instead of using 'Close All' / 'Close Saved'
# - Mixing global + workspace settings; check both for surprises
# - Heavy extensions slowing startup; trim periodically
# - Editing minified files (VS Code will warn; respect the prompt)

Why it matters

The UI rewards muscle memory. Command Palette + Quick Open + multi-cursor cover most actions; the integrated terminal keeps the loop tight. Spend half a day with the shortcut list pinned and the editor stops being something you fight.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Activity bar (left)  → File, Search, Git, Run/Debug, Extensions
// Side bar             → contextual panel for the active activity
// Editor (centre)      → tabs, splits, peek
// Status bar (bottom)  → branch, problems, encoding, line/col, indent
Try it Yourself »

Discussion

Loading…