Navigate through explorer by typing start of file/folder name
Problem
- VSCode Version: Any - OS Version: Any Feature Proposal When opening a folder containing hundreds of items (for example: `node_modules`) There is no easy way to get to a child folder/file without scrolling around. Would it be possible to allow the file viewer to navigate down to let's say the first file of the next letter keypressed? [code block] Just an idea, would help navigating large filesystems a bit easier.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement Keyboard Navigation for File Explorer in VSCode
The current file explorer in VSCode does not support direct keyboard navigation to files or folders based on the initial characters typed by the user. This limitation arises from the lack of a key listener that maps keystrokes to the first matching item in the file list, leading to inefficient navigation in directories with a large number of items.
Awaiting Verification
Be the first to verify this fix
- 1
Create a Key Listener for File Explorer
Implement a key listener that captures key presses while the file explorer is focused. This listener should check the current state of the file list and find the first item that matches the typed characters.
typescriptwindow.addEventListener('keydown', (event) => { if (isFileExplorerFocused()) { const typedChar = event.key; navigateToFirstMatchingItem(typedChar); } }); - 2
Implement Matching Logic
Develop a function that iterates through the items in the file explorer and selects the first item that starts with the characters typed by the user. This function should be called from the key listener.
typescriptfunction navigateToFirstMatchingItem(typedChar) { const items = getFileExplorerItems(); const matchingItem = items.find(item => item.name.startsWith(typedChar)); if (matchingItem) { selectItem(matchingItem); } } - 3
Handle Multiple Key Presses
Enhance the key listener to handle multiple consecutive key presses. Store the typed characters in a buffer and reset the buffer after a timeout period to allow for multi-character searches.
typescriptlet typedBuffer = ''; let bufferTimeout; window.addEventListener('keydown', (event) => { if (isFileExplorerFocused()) { typedBuffer += event.key; clearTimeout(bufferTimeout); bufferTimeout = setTimeout(() => { typedBuffer = ''; }, 1000); navigateToFirstMatchingItem(typedBuffer); } }); - 4
Test the Implementation
Conduct thorough testing by opening directories with varying numbers of items and ensuring that the navigation works as expected with different key presses. Validate that the first matching item is selected correctly.
Validation
To confirm the fix worked, open a directory in VSCode with a large number of items. Focus on the file explorer and type the initial letters of a file or folder name. The selection should jump to the first matching item based on the typed characters.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep