📂 Better File Directory

English | 繁體中文

Better File Directory is a modern visual file management extension for VS Code. It replaces the standard list view with an intuitive Grid Layout, featuring large thumbnails and rich Material Design icons, making it easier for developers to manage project assets and organize files visually.

✨ Key Features

• 🖼️ Visual Grid Layout: View files and folders as elegant cards instead of dense lists.
• 🖼️ Instant Thumbnails: Automatically generates previews for image files.
• 📂 System Integration: Instantly reveal the current directory in your OS file explorer via the title bar button.
• 🖱️ Intuitive Drag & Drop: Copy files easily by dragging them between different split views or folders.
• ✂️ Full Clipboard Support: Native support for Ctrl+C (Copy) and Ctrl+V (Paste).
• ⚡ Quick Action Menu: Create, rename, or delete items via a customized context menu.
• 🔀 Split View Mode: Press Ctrl + \ to instantly open a side-by-side pane for efficient file transfer.
• 🎨 Custom Icons: Customize folder and extension icons via VS Code settings.

📖 Usage Guide

1. Navigation

• Enter Folder: Double-click a folder card or select it and press Enter.
• Open File: Double-click a file card to open it in the VS Code editor.
• Breadcrumbs: Use the navigation chips at the top (e.g., src / components) to quickly jump back to parent directories.
• Reveal in OS: Click the "Open Folder" icon in the top-right title bar.
  • In Webview: Opens the specific sub-folder you are currently viewing.
  • In Sidebar: Opens the workspace root directory.

2. Management (Context Menu)

Right-click on any item or the background:

• New File...: Create a new file in the current directory.
• New Folder...: Create a new subfolder.
• Copy / Paste: Standard clipboard operations.
• Rename: Rename the selected item (Shortcut: F2).
• Delete: Move the item to Trash (Shortcut: Delete).

3. Drag and Drop

• Cross-view Copy: Drag a card and drop it into another "Better File Directory" window to copy.
• Quick Duplicate: Drag and drop slightly within the same view to create a copy (e.g., image_copy.png).

⌨️ Keyboard Shortcuts

🛠️ Commands

Access these via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

⚙️ Extension Settings

You can customize icons using the UI or by editing settings.json.

Via UI: Go to Settings (Ctrl+,) and search for "Better File Directory". You can now use the "Add Item" button to easily map keys to icon names.

Via JSON:

{
  "better-file-directory.customFolderIcons": {
    "my-api": "folder-api",
    "private-docs": "folder-secure"
  },
  "better-file-directory.customExtensionIcons": {
    "xyz": "react",
    "data": "database"
  },
  "better-file-directory.customFileIcons": {
    "special.config": "settings"
  }
}

🆕 Recent Updates

[0.0.10] - 2026-02-05

• Settings UI Upgrade: Refactored configuration settings (favoriteFolders, customFolderIcons, etc.) to use a Key-Value Map structure. This enables the native "Add Item" interface in VS Code Settings, making it much easier to add and manage paths/icons without editing JSON manually.
• Command Enhancement: The better-file-directory.open command now supports passing a URI or string argument, allowing for integration with keybindings or other automation tools.

📌 Requirements

VS Code Version: 1.90.0 or higher.

📄 License

MIT License