How to Use the VS Code File Explorer to Manage Files and Folders

The File Explorer is the first view you see when you open a project in VS Code. It shows your folder structure, lets you manage files, and gives you quick access to symbols, history, and terminal commands.

Open it from the Activity Bar or press Ctrl+Shift+E on Windows and Linux, or Cmd+Shift+E on macOS.

The file tree

When you open a folder, VS Code shows every file and folder inside it. You can expand and collapse folders with a click or the arrow keys.

At the top of the Explorer, a toolbar gives you quick actions:

• New File -- creates a new file in the selected folder
• New Folder -- creates a new folder
• Refresh -- reloads the file tree
• Collapse All -- collapses every expanded folder

You can also right-click any file or folder for a full context menu.

Creating files and folders

To create a new file, select the New File button in the Explorer toolbar or right-click a folder and choose New File. Type the file name, including the extension, and press Enter.

To create a new folder, select the New Folder button or right-click and choose New Folder. Type the folder name and press Enter.

VS Code creates the item immediately. If you type a path like src/components/Button.tsx, VS Code creates any missing folders along the way.

Renaming and deleting

Right-click a file or folder and select Rename, or select it and press F2. Type the new name and press Enter. If you rename a file that other files reference, VS Code may offer to update those references automatically.

To delete, right-click and select Delete, or select the item and press the Delete key. The file moves to your operating system's trash or recycle bin. You can restore it from there.

If you delete a file by mistake, check the Timeline view at the bottom of the Explorer. It keeps a local history of saved changes and may let you restore the file.

Moving and copying files

Drag any file or folder to a new location in the tree. VS Code moves it and updates any relative imports it can track.

Hold the Ctrl key (Option on macOS) while dragging to copy instead of move.

You can also drag files from your desktop or system file manager directly into the Explorer. If the Explorer is empty, dropped files open as editors instead. The setting explorer.autoOpenDroppedFile controls this behavior.

The Open Editors section

At the top of the Explorer, the Open Editors section lists every file currently open in an editor tab. Click any file to switch to it. Right-click for options:

• Close -- close that file
• Close Others -- close every file except that one
• Close All -- close every open file
• Close Saved -- close files that have no unsaved changes

To hide the Open Editors section, open the Explorer's ... menu and uncheck Open Editors.

Multi-selection

You can select multiple files at once to delete, move, or compare them. Hold Ctrl (Cmd on macOS) and click individual files. Hold Shift and click to select a range.

Select two files, right-click, and choose Compare Selected to open a diff view showing the differences.

Filtering the file tree

With the Explorer focused, press Ctrl+Alt+F on Windows and Linux, or Cmd+Option+F on macOS, to open the Find control. Type part of a file or folder name to highlight matches.

The Filter button toggles between highlighting matches and showing only matched items. The Fuzzy Match button lets you type a sequence of characters to match any part of a name.

The Outline view

The Outline view sits at the bottom of the Explorer, collapsed by default. Expand it to see the symbols in the currently active file: functions, classes, variables, and headings.

Click any symbol to jump to it. The Outline view also shows errors and warnings, so you can see problems at a glance.

Sort by position, name, or symbol type using the Sort By menu.

The Outline depends on language extensions for symbol information. Markdown files show headings, and JavaScript and TypeScript files show functions, classes, and variables.

Install the relevant language extension if symbols are missing.

The Timeline view

The Timeline view, also at the bottom of the Explorer, shows a history of changes to the active file. It combines two sources:

• Local history -- saved versions of the file, stored by VS Code
• Git history -- commits that touched the file

Click an entry to see a diff of what changed. Right-click an entry for options like Restore, Compare with File, or Copy Commit ID.

The local history can save you when you delete content or want to roll back to an earlier version. Configure it with settings like workbench.localHistory.enabled and workbench.localHistory.maxFileEntries.

Opening a terminal from the Explorer

Right-click any folder and select Open in Integrated Terminal. A terminal opens at the bottom of the window with that folder as the working directory. This is faster than typing cd paths manually.

Revealing files in the system file manager

Right-click a file or folder and choose Reveal in File Explorer (Windows), Reveal in Finder (macOS), or Open Containing Folder (Linux). Your operating system's file manager opens with that file or folder selected.

Hiding files from the Explorer

VS Code hides some files by default, like .git folders. To customize this, use the files.exclude setting:

json

"files.exclude": {
    "**/node_modules": true,
    "**/.git": true
}

Enable explorer.excludeGitIgnore to also hide files listed in your project's .gitignore file.

Next steps

The File Explorer works well for browsing and organizing. For fast file navigation, learn to use Quick Open. To run commands without the mouse, start with the Command Palette.