The answer
Listen for contextmenu event (right-click). preventDefault. Show a menu at the cursor position with options (Rename, Delete, New File). Remove the menu on click elsewhere.
VS Code Sidebar Features to Implement
How do you implement a context menu in a file explorer?
More FAQs in VS Code Sidebar Features to Implement
File type icons (by extension), search files (recursive filter), context menu (right-click with rename/delete/new), active file highlight, and drag and drop for moving files between folders. These make it feel like a real IDE.
Map file extensions to icons: const fileIcons = { '.js': '...', '.html': '...' }. Get the extension from the filename: name.substring(name.lastIndexOf('.')). Look up the icon, default to a generic file icon.
Recursively search the tree: function searchFiles(node, query, results) { if (node.name.includes(query)) results.push(node); if (node.children) node.children.forEach(child => searchFiles(child, query, results)); return results; }
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.