HEIC Image Viewer

View .heic and .heif images directly inside VS Code. Open any HEIC/HEIF file and it renders in a fast, native-feeling preview tab — no conversion step, no external app.

What it does

HEIC/HEIF is the default photo format on modern iPhones and many cameras, but VS Code can't display it out of the box. This extension registers a custom editor for *.heic and *.heif files so they open as images.

Decoding uses the fastest path available for your platform:

• macOS — shells out to the built-in sips tool (/usr/bin/sips) for a fast, zero-dependency conversion.
• All platforms / fallback — decodes with a bundled pure-JS build of libheif-js (plus pngjs). This is fully bundled into the extension, so it works everywhere with no native compilation and no extra downloads.

Features

• Open .heic / .heif files as an image preview.
• Zoom in/out, pan, and fit-to-window.
• Transparency checkerboard behind images with an alpha channel.

Requirements

• VS Code ^1.85.0.
• On macOS, decoding uses /usr/bin/sips, which ships with macOS — nothing to install. On other platforms the bundled libheif-js decoder is used automatically.

Local install & test (macOS)

You can run and test the extension locally in two ways.

A) Run from source (Extension Development Host)

1. Install dependencies:

   npm install
   

2. Open this folder in VS Code.
3. Press F5 (Run > Start Debugging). This builds the extension and launches a second VS Code window — the Extension Development Host — with the extension loaded.
4. In that window, open any .heic or .heif file. It should render in the HEIC Image Viewer.

For iterative development, run the watch build so changes rebuild automatically:

npm run watch

B) Package and install the .vsix

1. Build and package the extension:

   npm run package
   # equivalent: npx vsce package
   

   This produces heic-viewer-0.0.1.vsix in the project root.
2. Install it into your main VS Code:

   code --install-extension heic-viewer-0.0.1.vsix
   

3. Reload / restart VS Code, then open a .heic file.

About the DEP0169 url.parse() warning on install: code --install-extension may print (node:NNNNN) [DEP0169] DeprecationWarning: url.parse() .... This comes from VS Code's own CLI, not this extension — it appears when installing any extension (verified with a minimal empty extension) and the install still succeeds. It is safe to ignore. The code CLI manages its own Node flags, so NODE_OPTIONS=--no-deprecation does not suppress it; if you want it hidden, filter stderr:

code --install-extension heic-viewer-0.0.1.vsix 2> >(grep -v DEP0169 >&2)

To uninstall: code --uninstall-extension your-publisher-id.heic-viewer (or remove it from the Extensions view).

Generating a test file on macOS

If you don't have a HEIC handy, convert any PNG with the built-in sips tool:

sips -s format heic input.png --out test.heic

Then open test.heic in VS Code.

Build scripts

Version history

Maintained automatically by the /publish skill on each Marketplace release.

License

MIT