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

Learn how to make the most of Visual Studio Code with our tutorial that covers navigating folders, using the sidebar, switching between files and understanding the Outline view. These skills are crucial for anyone looking to enhance their proficiency in web development and programming.

Key Insights

Visual Studio Code allows you to drag and drop folders into the sidebar for easy access and file navigation. You can also open a folder via the File > Open Folder menu.
Quick switching between files in the current folder can be done by using the Go > Go to File option or by using keyboard shortcuts specific to your operating system.
The application provides a search function within the current folder, accessible through keyboard shortcuts or by selecting Edit > Find in Files.
The sidebar includes features such as creating new files or folders and renaming existing ones, all achieved through a simple right-click or a specific keyboard shortcut.
Switching between open files (tabs) can be achieved with keyboard shortcuts, allowing for easy navigation within a project.
The outline view feature in the file explorer sidebar provides a clear structure of the current file, which can be especially helpful when dealing with HTML tags.

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.

This exercise is excerpted from Noble Desktop’s front-end web development (Visual Studio Code) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

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.

Full-Stack Web Development Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

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

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).
Click on anything in the outline to go to that code.

Working with Folders

Sidebar Features

Switching Between Files (Tabs)

Outline View

How to Learn Coding