Skip to main content
Dan Rodney/2 min read

Topic 2A: VS Code: Working with Folders, Files, & the Sidebar

Sidebar Productivity Moves

Quick Open Files

Cmd-P (Mac) or Ctrl-P (Windows) — type filename to jump.

Find in Files

Cmd-Shift-F (Mac) or Ctrl-Shift-F (Windows) searches the whole folder.

Right-Click for New File/Folder

Or rename — keyboard shortcut: select item + Return/Enter.

Outline View

Bottom of sidebar — shows file structure (HTML tags, JS functions) for quick navigation.

Build Web Development Skills at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches the modern web stack — VS Code is the editor used throughout.

Learn how to effectively navigate and use Visual Studio Code with this tutorial, covering topics such as working with folders, sidebar features, switching between files, and utilizing the outline view.

Working with Folders

  • Drag a folder onto vs. Code to view it in the sidebar. You can also choose File > Open Folder and select a folder you want to open.

  • Quickly open/switch to a file in the current folder:

    • Choose Go > Go to File or hit Cmd–P (Mac) or CTRL–P (Windows).
    • Start typing the name of a file (use the Down/Up Arrow keys to move the selection up or down).
    • Hit Return (Mac) or Enter (Windows) to open the selected file.

  • Search within the current folder: Hit Cmd–Shift–F (Mac) or CTRL–Shift–F (Windows) or choose Edit > Find in Files.

Sidebar Features

Here are some useful things you can do in the sidebar:

  • CTRL–Click (Mac) or Right–Click (Windows) on a folder in the sidebar (or an empty area) and choose New File or New Folder.

  • CTRL–Click (Mac) or Right–Click (Windows) a file or folder in the sidebar and choose Rename.

    TIP: You can also select a file or folder in the sidebar and hit Return (Mac) or Enter (Windows) to make the name editable so you can rename it.

Switching Between Files (Tabs)

  • Mac: Hit CTRL–Tab (add Shift to cycle in the opposite direction).
  • Windows: Hit CTRL–Page Down or CTRL–Page Up (Windows).

Outline View

  1. In the file Explorer sidebar, at the bottom click on Outline to see the structure of the current file (such as the tags in HTML).

  2. Click on anything in the outline to go to that code.