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.
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
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.
