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, indentTry it Yourself »
Discussion
Loading…