File Size Viewer

A free, open-source VS Code extension for instantly inspecting file and folder storage sizes right in your editor.

💡 What is File Size Viewer?

File Size Viewer is a fast, lightweight, and open-source VS Code extension built to give developers instant visibility into workspace file and folder storage sizes.

Instead of freezing your editor UI or forcing you to leave your IDE, File Size Viewer runs non-blocking Node.js Worker Threads in the background to calculate exact physical disk allocations (du -sh precision) in real-time.

[!NOTE] Key Capabilities:

• ⚡ Instant File & Folder Storage Inspection: Calculates exact physical disk block allocations (du -sh precision) in real-time.
• 🔍 Native Hover Tooltips: Hover over any file or folder in the VS Code Explorer to instantly see filename | Size.
• 📂 Dedicated "File Sizes" Tree View: View a clean hierarchical sidebar tree of your workspace with right-aligned sizes.
• 📊 Live Status Bar Readouts: Displays live storage info for your active open file or workspace total in the bottom status bar.
• 🚀 Zero CPU Overhead: Powered by background Node.js Worker Threads (0% CPU when idle).

🎯 What Problem Does This Solve?

Every developer encounters disk space mysteries while coding:

• "Which hidden subfolder in node_modules, .next, or dist is taking up several gigabytes?"
• "Why did my git repository suddenly become so heavy?"
• "Which generated asset or bundle build file is unexpectedly bloated?"

Without this extension, developers must pause their workflow, open a terminal, and run system commands like du -sh or launch separate heavy disk visualization apps. File Size Viewer solves this by embedding live storage insights directly inside your VS Code sidebar without impacting typing speed or system performance.

⚡ Quick Install

[!IMPORTANT] Install Directly in VS Code:

Or open VS Code Quick Open (Cmd + P / Ctrl + P) and run:

ext install FirozShaikh.vscode-file-size-viewer

(For offline usage, download vscode-file-size-viewer-1.0.1.vsix $\rightarrow$ Command Palette $\rightarrow$ Extensions: Install from VSIX...)

⚡ Features, Architecture & Performance

🚀 Off-Thread Background Scanning

Traditional extensions scan files on VS Code's main Extension Host thread, causing noticeable editor lag. File Size Viewer offloads all directory traversal to background Node.js Worker Threads (scannerWorker.js). Your editor UI remains 100% responsive.

📏 Exact Physical Disk Allocation (du -sh Match)

On macOS and Linux, raw byte counts (st.size) don't reflect actual hard drive usage due to filesystem block sector allocations. File Size Viewer calculates st.blocks * 512 physical disk block reservations, giving you byte-for-byte exact matches with native terminal commands like du -sh.

🛡️ Sub-Millisecond Incremental Watcher

When you create, modify, or delete a file, an event-driven file watcher updates the cache and re-sums parent directories in $O(\text{depth})$ time. Stale entries are automatically purged, guaranteeing 0% CPU consumption during idle time.

📊 Benchmark Summary

• Scanning Speed: 100,000+ files processed in milliseconds.
• Idle Resource Usage: 0% CPU and 0 Disk I/O when idle.
• Memory Footprint: ~1 to 2 MB of RAM.
• Extension Package Size: Compact ~192 KB VSIX bundle (excluding video assets).

📝 Example Output

Here is how your workspace storage breakdown looks inside the File Sizes sidebar view:

📁 Supported Files & Folders

• Supported: All standard files, source code files, binaries, images, video assets, subdirectories, symlinks, and multi-root workspaces.
• Symlinks: Symlinks are safely evaluated without infinite recursion loops.

🚫 Exclusions & Configuration

You can customize directory exclusion patterns in your VS Code settings.json:

{
  "fileSizeViewer.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/dist/**"
  ]
}

By default, internal .git directories are automatically excluded to preserve clean source code metrics.

⌨️ Commands & Controls

Access these commands anytime from the Command Palette (Cmd + Shift + P / Ctrl + Shift + P):

🔒 Privacy & Security

• No Remote Network Requests: The extension makes zero HTTP/HTTPS requests.
• No Telemetry: No tracking, analytics, or user metrics collected.
• Local-Only Processing: All disk operations occur strictly on your local device.

💻 Compatibility

• VS Code Engine: ^1.80.0 or higher
• Operating Systems: macOS, Windows, Linux
• Architectures: x64, ARM64 (Apple Silicon M1/M2/M3)

🏋️ Performance Considerations

• Large Repositories: For repositories exceeding 200,000 files (like massive monorepos), initial background indexing streams progressively without impacting typing speed.
• Ignored Directories: Adding heavy build outputs (e.g. dist, build) to fileSizeViewer.exclude speeds up initial background scanning even further.

⚠️ Known Limitations

• Native Explorer Text API: Microsoft's public VS Code Extension API currently restricts inserting custom text directly inline inside native Explorer file tree rows. Therefore, full size strings are provided via hover tooltips, the File Sizes view, and the Status Bar.

🗺️ Roadmap

• [ ] Custom size color thresholds configuration via settings.
• [ ] Export size breakdown report as Markdown / JSON.
• [ ] Visual disk usage pie/treemap breakdown view.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🛠️ Development & Local Setup

Prerequisites

• Node.js ^18.0.0 or higher
• npm ^9.0.0 or higher

Installation

# Clone the repository
git clone https://github.com/buildwithfiroz/vscode-file-size-viewer.git

# Navigate to project directory
cd vscode-file-size-viewer

# Install dependencies
npm install

# Compile TypeScript
npm run compile

🧪 Testing

Run extension compilation and local development host:

1. Open the project folder in VS Code.
2. Press F5 to open an Extension Development Host window.
3. Test hovering over files and viewing the File Sizes sidebar panel.

🐛 Reporting Issues

If you encounter a bug or have a feature suggestion, please open an issue on GitHub: 👉 Report Issue on GitHub

❓ Frequently Asked Questions (FAQ)

Q1: How does File Size Viewer calculate folder sizes without slowing down VS Code?

A: File Size Viewer uses Node.js Worker Threads (worker_threads) to move directory traversal off the main Extension Host thread. Scanning thousands of files happens in the background with zero UI stutter and 0% idle CPU overhead.

Q2: Why does du -sh show 34M while File Size Viewer shows 33.6 MB?

A: du -sh rounds up to the nearest whole integer for quick terminal display (e.g. 33.58 MB $\rightarrow$ 34M). File Size Viewer provides exact decimal precision (33.6 MB), giving you a more accurate representation of your disk space.

Q3: How do I exclude heavy build folders like node_modules or .next?

A: Add your custom glob patterns under "fileSizeViewer.exclude" in your VS Code settings.json. By default, internal .git directories are automatically excluded.

Q4: Is File Size Viewer free, open source, and privacy-friendly?

A: Yes! File Size Viewer is 100% free and open-source under the MIT license. It runs entirely on your local machine and collects zero user data or telemetry.

🔄 Alternatives / When to Use Something Else

• Terminal (du -sh *): Useful for one-off CLI terminal checks. Use File Size Viewer when you want continuous, automated visibility inside VS Code while coding.
• Disk Visualizers (NCurses/DaisyDisk): Useful for full system hard-drive cleanups. Use File Size Viewer for project-level development inspection.

📄 License

Distributed under the MIT License. See LICENSE for details.

👨‍💻 Author - Contact Information

This project is proudly built and maintained by @buildwithfiroz — focused on making AI tools more accessible, efficient, and developer-friendly.

If you found this useful, consider giving it a ⭐️ on GitHub or contributing to improve it further!

Made with ❤️ by Firoz