Disk Size Treemap

English | 中文

• GitHub
• Marketplace

Features

• 📁 File Structure View — Interactive squarified treemap showing files and folders proportional to their size. Click folders to drill down, click files to reveal in VS Code Explorer.
• 🎨 File Types View — Aggregate treemap by file extension, showing which types consume the most disk space. Click any type to jump to its largest files.
• 📊 Largest Files View — Table of the largest files, sorted by size and filterable by file type. Click rows to reveal in explorer.
• 🌲 Disk Size Tree — A tree view in the Explorer sidebar that shows each file and folder's size inline. Folder totals are computed lazily in the background and cached, so expanding deeper stays fast.

Usage

Open the Treemap

Right-click in the Explorer and select "Show Disk Size Treemap":

• Empty area — shows the full workspace tree
• On a folder — shows that folder's contents directly
• On a file — shows the file's parent folder, so you can see its siblings in context

You can also open the Command Palette (Ctrl+Shift+P) and run the same command to scan the workspace root.

Disk Size Tree

Open the Explorer sidebar and find the Disk Size view near the bottom. It mirrors your workspace tree and shows each item's size as gray text after its name (folders first, then files, sorted A→Z like the native Explorer):

• Files show their size immediately; click to open the file.
• Folders show Calculating… while their total is computed recursively in the background, then the final size. Scanning a folder caches every descendant folder's size, so expanding deeper is instant.
• Use the Refresh button in the view title to clear the cache and rescan; the Show Disk Size Treemap button opens the full treemap panel.

Icons

File and folder icons use VS Code Codicons, keeping the visual style consistent with the rest of your editor. Icons are automatically chosen based on file extension:

Switch Views

Use the tabs at the top of the treemap panel:

Largest Files Filter

In the Largest Files view, use the dropdown to filter by a specific file extension, or leave as "All Types" to see everything. Adjust the "Top N" number to control how many files are shown.

Interact

• Click a folder in File Structure view to drill down
• Click any file tile or table row to reveal it in the VS Code Explorer
• Hover over tiles for detailed size information

Scan Controls

While a scan is running, use the toolbar Pause / Resume button to pause or resume the scan. Use Refresh to manually rescan the current folder. The extension intentionally does not watch the filesystem — automatically rescanning a large tree would be too expensive.

For very large folders, the treemap renders the top 2000 items by size to keep the UI responsive.

Color Legend

Extension Settings

This extension currently has no configurable settings. All views are available out of the box.

Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode
npm run watch

# Package as .vsix
npx @vscode/vsce package

Press F5 in VS Code to launch the Extension Development Host and test the extension.

License

MIT