The interface and opening folders

VS Code · Essentials · 7 min

Knowing where everything lives makes the rest of VS Code discoverable instead of overwhelming.

VS Code works best when you open a folder (your project root), not single files: File > Open Folder, or from a terminal code . (on macOS, install the code command via the Command Palette: "Shell Command: Install 'code' command in PATH"). The folder becomes your workspace, and search, Git, tasks and settings apply to it.

The window has five areas:

  • The activity bar on the far left switches views: Explorer (Ctrl+Shift+E), Search, Source Control (Ctrl+Shift+G), Run and Debug, Extensions (Ctrl+Shift+X).
  • The side bar shows the selected view, such as the file tree. Ctrl+B toggles it.
  • The editor area holds tabs and can be split into editor groups side by side with Ctrl+\.
  • The panel at the bottom holds the Terminal, Problems, Output and Debug Console. Ctrl+J toggles it.
  • The status bar shows the Git branch, errors and warnings, line/column, indentation, encoding and the language mode; each item is clickable.

Shortcuts here use Windows/Linux keys; on macOS use Cmd for Ctrl in most of them.

Single-clicking a file opens it in preview mode (italic tab title) that gets replaced by the next file you click; double-click or start editing to keep it open. Ctrl+Tab cycles open editors.

Example

# from a terminal
code .                      # open the current folder as a workspace
code -g src/app.ts:42       # open a file at line 42 (--goto)
code --diff old.json new.json   # side-by-side diff
code --new-window ~/notes

# inside VS Code
#   Ctrl+B        toggle side bar        Ctrl+J   toggle panel
#   Ctrl+\        split editor           Ctrl+Tab cycle open editors
#   Ctrl+Shift+E  Explorer               Ctrl+Shift+X  Extensions

Remember

  • Open folders (code .), not loose files
  • Activity bar picks the side bar view; Ctrl+B and Ctrl+J toggle side bar and panel
  • Italic tab = preview; double-click to keep it open

Watch out for

  • Opening a parent directory with many projects; Git, search and settings then target the wrong root.

Check yourself

  1. Why does a file you single-clicked disappear when you click another file?

Sign in to answer, see the explanations, and get this lesson back as a quick review later.

Official docs: code.visualstudio.com/docs/editing/getting-started/userinterface