webpocalypse-vscode

Optimize JPG / PNG images inside VS Code using the webpocalypse CLI — right-click in the Explorer, or run a command from the palette.

Fully local: the extension runs npx webpocalypse … in your workspace. No separate server and no API keys.

---

What it does

1. Explorer — Right-click a .jpg / .jpeg / .png → Optimize Image, or a folder → Optimize Folder.
2. Command Palette — Webpocalypse: Optimize Images opens a folder picker (same optimization as a folder right-click).
3. Progress — A short notification while work runs, then a summary with file count and approximate total size savings (from CLI --json output).
4. Logs — Full CLI stdout/stderr go to the Webpocalypse output channel.

This is the same toolchain as the CLI and GitHub Action — batch conversion with sharp, optional WebP / AVIF, resize caps, and preserved directory layout.

---

Requirements

Requirement	Notes
VS Code (or compatible editor)	^1.85.0 — see engines in package.json.
Node.js + npm	Used for npx webpocalypse. Node ≥ 18 matches the CLI.
Network (first run)	npx may download the package; npx --yes avoids interactive prompts.

Works on Linux, macOS, and Windows (same as the CLI and sharp).

---

Usage

Explorer

Target	Menu item	Behaviour
.jpg / .jpeg / .png	Optimize Image	Runs the CLI on a temporary folder containing that file, then merges outputs into the file’s parent directory (the CLI only accepts directories).
Any folder	Optimize Folder	Runs the CLI on that path directly.

Command Palette

Command	When no file/folder is passed from Explorer
Optimize Image	Opens an image file picker.
Optimize Folder	Opens a folder picker (same as below).
Webpocalypse: Optimize Images	Opens a folder picker.

Folder output location

Setting	CLI flag	Result
webpocalypse.inPlace off (default)	(none)	CLI writes to a sibling <folder>-optimized directory.
webpocalypse.inPlace on	--in-place	CLI replaces the folder contents safely (temp dir + rollback on failure).

For single-file optimization, inPlace controls where merged outputs are read from after the CLI run (in-place output lives in the temp dir; otherwise the extension merges from <temp>-optimized).

---

Settings

All settings live under Webpocalypse in VS Code settings (webpocalypse.*).

Setting	Default	Description
quality	80	Compression quality 1–100 (-q).
format	webp	webp | avif | both (-f).
maxWidth	—	Optional max width in px (--max-width).
maxHeight	—	Optional max height in px (--max-height).
lossless	false	Lossless compression (--lossless).
inPlace	false	Folder runs: write into the same directory; single-file runs: merge from in-place temp output.

---

How the CLI is invoked

The extension runs (conceptually):

npx --yes webpocalypse <path> --json [options…]

Options are derived from your settings. Structured results are parsed from the last JSON object line on stdout (the CLI also prints a human-readable table before that line).

---

Development

npm install
npm run compile    # emit out/
npm run watch      # tsc --watch

Open this repo in VS Code and Run Extension (F5) to launch an Extension Development Host with your local build.

VSIX (local install)

npm install -g @vscode/vsce   # once
npm run compile
vsce package                    # produces .vsix

Install the .vsix via Extensions → … → Install from VSIX….

Publish to the Marketplace

Use @vscode/vsce with a publisher account and a Personal Access Token scoped to Marketplace (Manage). See the Publishing Extensions guide.

---

Related

Project	Role
webpocalypse (npm)	CLI — encoding, --json, --in-place.
webpocalypse-action	Optimize images in GitHub Actions.

---

License

MIT — see LICENSE.