Navigating VSCode's File Explorer Panel without Your Mouse

A very old typewriter

Search youtube/twitter/instagram and you'll find 1,000 people peddling the same keyboard shortcuts for VSCode: Cmd+D for multi-select, duplicating lines, and so on. Once you master those basics, you eventually figure out that most of the time that you're wasting in VSCode with your mouse is spent poking around the File Explorer panel. There are system keyboard shortcuts for it, but they're not all intuitive, and I couldn't find anyone explaining them... So here I am creating the change I want to see in the world.

Out of the box

E Show/Focus explorer panel (folders view), or toggle back to focusing the editor panel if focus is currently in explorer
/ Move cursor up/down
/ Expand/collapse folder
Open selected file for editing, and focus it
space Open selected file for editing, but keep focus in explorer
^return Open file to side (split view)
return Rename file/folder
backspace Delete selected file (to system trash)
F Find in folder (search contents of files in current folder)
F Filter explorer view (unfortunately, does not search in collapsed folders)
/ Expand selection up/down (your selections don't have to be continuous. Let go of shift, hit up/down a few times, and then add shift to add to the selection.)
esc Cancel selection

Custom shortcuts

🤘🏻-tip: Map caps lock to ^ ctrl⇧ shift⌥ opt⌘ cmd using Karabiner-Elements. This is often called the "hyper" key, and I'll refer to it here as . Nobody uses caps lock any more anyway, right?


E Show/Focus the file explorer panel. (Same as E, but without the Shift modifier.) I use this often so I wanted a simpler shortcut.

{ "key": "cmd+e", "command": "workbench.explorer.fileView.focus" }

C Collapse all folders

{ "key": "ctrl+shift+alt+cmd+c", "command": "workbench.files.action.collapseExplorerFolders" }

N New file in current folder

{ "key": "cmd+n", "command": "explorer.newFile" }

N New folder in current folder

{ "key": "alt+n", "command": "explorer.newFolder" }

F Reveal active file in explorer

{ "key": "ctrl+shift+alt+cmd+f", "command": "workbench.files.action.showActiveFileInExplorer" }

Webmentions

It's like comments, but you do it on Twitter.

Discuss on TwitterEdit on GitHubContributions