VS Code Sidebar Features to Implement

VS Code Sidebar Features to Implement

Beyond the basic tree view, here are VS Code sidebar features that can impress the interviewer.

1. File Type Icons

const fileIcons = {
  ".js": "📄", ".html": "🌐", ".css": "🎨",
  ".json": "⚙", ".md": "📝", ".png": "🖼",
};

function getFileIcon(name) {
  const ext = name.substring(name.lastIndexOf("."));
  return fileIcons[ext] || "📄";
}

2. Search Files

function searchFiles(node, query, results = []) {
  if (node.name.toLowerCase().includes(query.toLowerCase())) {
    results.push(node);
  }
  if (node.children) {
    node.children.forEach((child) => searchFiles(child, query, results));
  }
  return results;
}

3. Context Menu (Right-Click)

node.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  showContextMenu(e.clientX, e.clientY, node);
});

function showContextMenu(x, y, node) {
  const menu = document.createElement("div");
  menu.className = "context-menu";
  menu.style.left = x + "px";
  menu.style.top = y + "px";
  menu.innerHTML = `
    <button onclick="renameNode('${node.name}')">Rename</button>
    <button onclick="deleteNode('${node.name}')">Delete</button>
    <button onclick="addNode('${node.name}')">New File</button>
  `;
  document.body.appendChild(menu);
}

4. Active File Highlight

function setActiveFile(node) {
  document.querySelectorAll(".tree-node.active").forEach((n) => n.classList.remove("active"));
  node.classList.add("active");
}

5. Drag and Drop (Move Files)

Use the HTML Drag and Drop API to move files between folders.

The Takeaway

VS Code sidebar features: file type icons (by extension), search files (recursive filter), context menu (right-click, rename/delete/new), active file highlight, and drag and drop for moving files. These features make the file explorer feel like a real IDE.