Interface Tour

VS Code has five distinct areas on screen. Every button, panel, and menu you will ever use lives in one of these five areas. Once you understand the layout, you stop feeling lost and start feeling in control.

This page walks through each area with the Excel analogy, explains what it does, and tells you the keyboard shortcut to get there instantly.

The Five Areas at a Glance

When VS Code is open with a project folder loaded, your screen is divided into five zones:

Area 1 — The Activity Bar

What it is: The narrow vertical strip of icons on the far left edge of VS Code. It never goes away. Clicking each icon switches what appears in the Sidebar to its right.

The Excel analogy: The ribbon tabs in Excel. Clicking "Data" shows Data tools. Clicking "Insert" shows Insert tools. In VS Code, clicking each Activity Bar icon shows a different panel in the Sidebar.

The icons, from top to bottom

Claude Code adds its own icon to the Activity Bar after installation — a small Anthropic logo. Clicking it opens the Claude Code panel.

Area 2 — The Sidebar

What it is: The panel that takes up the left side of VS Code, next to the Activity Bar. Its content changes completely depending on which Activity Bar icon is active.

The Excel analogy: Imagine the Name Box and formula bar area of Excel expanded into a full panel. In Excel, that area gives you context about what you've selected. In VS Code, the Sidebar gives you context about which area of your project you're working in.

Sidebar in Explorer mode (most common)

When the Explorer icon is active (two overlapping pages), the Sidebar shows your project's file tree — every folder and file in the project, indented hierarchically.

• Folders appear with a right-pointing triangle. Click the triangle to expand and see the files inside.
• Files appear with their icon (React files show the React logo, TypeScript files show a blue TS, etc.)
• Right-clicking any file or folder gives you options: Rename, Delete, Copy, New File, New Folder
• Single-clicking a file opens it in the editor in "preview mode" (tab title is shown in italics — it closes if you click another file)
• Double-clicking a file opens it properly (tab title is not italic — it stays open)

Sidebar in Source Control mode

When the Source Control icon (branching lines) is active, the Sidebar shows:

• Changes section: Every file you have modified since the last Git commit, with a letter beside each (M = modified, U = untracked new file, D = deleted)
• Staged Changes section: Files you have selected to include in the next commit
• Commit message box: Type your commit message here
• Three-dot menu (···): All Git actions — push, pull, branch, merge

This is where you do all Git work without typing a single Git command.

Sidebar in Search mode

When the Search icon (magnifying glass) is active, the Sidebar shows a search box. Type any word and VS Code searches every file in the project instantly — not just open files, but all files. Results appear below with the file name, line number, and surrounding context.

Area 3 — The Editor

What it is: The main centre area of VS Code where code files open. This is where you actually write.

The Excel analogy: The cell you are editing, but full-screen. In Excel, you click a cell and the formula bar shows what's inside it. In VS Code, you click a file and the entire centre of your screen shows its contents — thousands of lines at once.

Key features of the editor

Tabs across the top: Each open file gets a tab. Click a tab to switch to that file. Close a tab with the × on it. Tabs with unsaved changes show a dot instead of × until you save (Ctrl+S).

Syntax highlighting: VS Code reads the file extension and colour-codes the content accordingly. A .tsx file gets React + TypeScript colours. A .css file gets CSS colours. A .json file gets JSON colours. Keywords, strings, function names, and variables are each a different colour — exactly like how Excel distinguishes formula syntax, text strings, and numbers.

Line numbers: Every line has a number on the left. When Claude Code references "line 47" or an error says "line 23", these numbers are what they mean.

Cursor and selection: Click anywhere to place your cursor. Click and drag to select. Shift+Click selects from your current cursor to where you clicked. All the standard text editing you know from Word and Excel works here.

IntelliSense (autocomplete): As you type, a dropdown appears suggesting completions. Use arrow keys to navigate, Tab or Enter to accept. This is VS Code learning what you're about to write and finishing it for you.

Error and warning indicators: Red squiggly underlines indicate errors (the code will not run). Yellow squiggly underlines indicate warnings (the code might work but something looks suspicious). Hover over the underline to see the explanation.

The minimap: On the far right edge of the editor, you will see a tiny preview of the entire file. You can click it to jump to that part of the file. It is useful for very long files. (We turn this off in settings — it takes up space without adding much value for beginners.)

Splitting the editor

You can work on two files side by side. Right-click a tab and choose "Split Right". The editor area splits into two panels. Drag a tab from one panel to the other to rearrange.

Area 4 — The Terminal

What it is: A fully functional command-line terminal, embedded directly inside VS Code. It runs PowerShell (default on Windows) or Git Bash (which we configure in Settings).

The Excel analogy: The Immediate Window in the VBA Editor (Alt+F11 in Excel, then Ctrl+G). The Immediate Window lets you type VBA commands and run them instantly, see output, and debug. The VS Code terminal does the same for your command line — type a command, press Enter, see the result, all without leaving VS Code.

Opening the terminal

Press Ctrl+` (backtick, to the left of the 1 key). The terminal panel opens at the bottom of VS Code. Press it again to hide it. The terminal keeps running in the background even when the panel is hidden.

What you use the terminal for

Multiple terminal sessions

You can run more than one terminal at the same time. Click the + icon in the top right of the terminal panel to open a new terminal session. Useful when you need the dev server running in one terminal while you type other commands in another.

Area 5 — The Status Bar

What it is: The thin coloured strip at the very bottom of the VS Code window. It always shows information about your current state.

The Excel analogy: Excel's status bar at the bottom of the spreadsheet — the one that shows "Sum: 1,234" or "Average: 45.6" when you select cells. In Excel, it gives you context about your selection. In VS Code, it gives you context about your current file and project state.

What the Status Bar shows

Reading left to right:

Keyboard Navigation — The Four Shortcuts to Learn First

You do not need a mouse to navigate VS Code. These four shortcuts are the ones you will use every single day:

The Command Palette (Ctrl+Shift+P)

This deserves its own explanation because it is genuinely unusual.

Press Ctrl+Shift+P. A small input box appears at the top of VS Code. Type any word describing what you want to do. VS Code searches every command it knows — hundreds of them — and shows you matches. Press Enter to run the highlighted command.

Examples:

• Type "format" → see "Format Document" → Enter → your code is formatted
• Type "theme" → see "Preferences: Color Theme" → Enter → pick a theme
• Type "git blame" → see "GitLens: Toggle Line Blame" → Enter → see who wrote each line
• Type "terminal" → see "Terminal: Create New Terminal" → Enter → open a terminal

If you ever forget a shortcut, open the Command Palette and search for what you want. The shortcut is shown next to each command in the list.

Putting It Together

After reading this page, open VS Code, open any folder (File → Open Folder), and spend 5 minutes doing each of these:

You do not need to remember all of this immediately. You will learn the layout through use. The goal of this tour is that nothing in VS Code surprises you — you know where everything lives.