SpaceSleuth — Workspace Folder Size

A VS Code extension that shows what fills up your workspace and lets you delete folders to reclaim space. Built for SAP Business Application Studio and its 10 GB workspace limit.

Features

• 🗺️ Disk analyzer — a squarified treemap of the current folder plus a sortable list view, both drillable via a breadcrumb.
• 📄 Files and folders — the treemap, the list and the tree show individual files next to the folders, so a single 2 GB bundle.js is as visible as a 2 GB folder.
• 📊 Live usage meter — used space against the limit, turning amber at 80 % and red when the limit is exceeded.
• 🧭 Two ways to look — treemap for the big picture, list view with share bars for the exact numbers.
• 🔎 Filter — type to highlight matching folders (treemap) or narrow the list down.
• 🗂️ Folder Sizes tree — a tree in the sidebar with every folder and file, largest first, colour coded by share, with file type icons.
• 🕵️ Hidden folders — folders excluded by the exclude rules are still measured and shown as Hidden, so nothing silently disappears.
• 🗑️ Safe deletion — moved to the system trash by default, with a modal confirmation that shows the full path and size.
• 📂 Open anywhere — open a folder in the OS file manager, reveal it there, or open it as a VS Code workspace.
• 🔍 Scan any folder — the workspace, or any folder on disk.
• 🔁 Refresh — re-scan after cleaning up.
• ⚙️ Configurable — size limit, excluded folder names and the delete behaviour.

Seeing the UI without VS Code

The analyzer is a plain HTML document, so it can be previewed in any browser:

npm run preview

This writes preview/disk-analyzer.html and opens it in your default browser. The preview uses the exact same document as the VS Code webview, with a mock workspace baked in, so the treemap, the list view, the filter, the details panel and the breadcrumb navigation all work. Double click a folder to drill in, use the breadcrumb to come back.

Regenerate it at any time after changing the UI:

npm run compile && node scripts/preview.js --no-open

The disk analyzer

The panel follows the active VS Code theme (light, dark and high contrast).

Commands

Opening folders in the file manager

Two actions open a folder outside the editor:

• Open in file manager – opens the folder in Explorer / Finder / the Linux file manager.
• Reveal in file manager – opens the file manager with the entry selected. On Linux, where no portable "select this file" command exists, the containing folder is opened (the same behaviour as VS Code's Open Containing Folder).

Both are implemented by calling the operating system directly, because the two obvious VS Code APIs do not work here:

• vscode.env.openExternal only handles external links (http:, https:, mailto:) – a file: uri is silently ignored.
• The built in revealFileInOS command silently does nothing when it is triggered programmatically in a remote window (microsoft/vscode#232522) and can fail when the explorer view is not open (microsoft/vscode#110869).

If an action cannot be carried out – a remote machine, a missing file manager – SpaceSleuth says so and offers Open in VS Code or Copy path instead of failing silently.

In a remote window (WSL, SSH, dev container) the scanned folders live on the remote machine, so the local file manager cannot show them. Open in VS Code always works.

Configuration

{
  // Size limit in GB (the Business Application Studio limit is 10 GB).
  "spaceSleuth.sizeLimitGb": 10,

  // Folder names that are skipped while scanning. Their size is still
  // measured and shown as "Hidden" in the disk analyzer.
  "spaceSleuth.excludeFolders": [".git"],

  // Move deleted folders to the system trash instead of removing them.
  "spaceSleuth.deleteToTrash": true
}

Only .git is excluded by default. node_modules, dist, build and out are exactly the folders that blow through a workspace limit, so they are scanned by default.

Usage in Business Application Studio

1. Install the extension (.vsix) into Business Application Studio.
2. Open the Folder Sizes view in the Explorer side panel.
3. Click Scan Workspace (or pick a folder with Select Folder to Scan).
4. Open the Disk Analyzer to see the treemap of the biggest space consumers.
5. Select a folder, hit Delete folder… and confirm – the folder goes to the trash.
6. Watch the meter in the header and the status bar.

Suggested folders to clean (BAS)

Common space consumers in a CAP / Node.js workspace:

• node_modules
• dist, build, out
• target, gen (build artifacts)
• .next (Next.js)

Development

npm install     # install dependencies
npm run compile # compile TypeScript into out/
npm run preview # build preview/disk-analyzer.html and open it in a browser
npm test        # run the unit tests (scanner, treemap, formatter, webview, preview)

The tests use the Node built-in test runner. The webview tests boot the real document in a DOM (jsdom) and check that the treemap, the list, the breadcrumb and the details panel really render. The preview test does the same for the generated HTML file, including the drill down navigation.

Publishing to the VS Code Marketplace

This extension follows the standard vsce workflow (same pattern as the API tester extension).

1. Install vsce

npm install -g @vscode/vsce

2. Set your publisher

The publisher is already set in package.json to "publisher": "harjyotsital".

3. Create a publisher + PAT

1. Go to Visual Studio Marketplace Manage Publishers → Create Publisher.
2. Create a Personal Access Token in Azure DevOps with Marketplace → Manage scope.

4. Login & publish

cd space-sleuth
npm install
vsce login harjyotsital
vsce package          # creates space-sleuth-<version>.vsix
vsce publish          # publish to Marketplace

Or use vsce publish patch / minor / major to bump the version automatically.

Local install (without publishing)

npm run package
# then install the .vsix in VS Code / Business Application Studio:
# Extensions view → … → Install from VSIX → select space-sleuth-<version>.vsix

Files

• src/extension.ts — activation, commands, status bar
• src/folderScanner.ts — async, cancellable size calculation for folders and files
• src/folderSizeTreeDataProvider.ts — the sidebar tree
• src/diskAnalyzerPanel.ts — scan state, navigation, delete actions
• src/diskAnalyzerWebview.ts — the analyzer UI (HTML, CSS, script) + preview mode
• src/analyzerState.ts — pure state building, shared by the panel and the preview
• src/treemap.ts — squarified treemap layout
• src/format.ts — shared formatting helpers
• src/deleteFolder.ts — confirmation and trash handling
• src/trash.ts — platform specific trash integration
• src/shell.ts — opening folders and files in the OS file manager
• scripts/preview.js — builds the standalone HTML preview

License

MIT