Image Hover Preview — VS Code Extension

Hover over any image URL in your editor and instantly see a 200 × 200 px inline preview right inside the tooltip. Works in every file type (JavaScript, TypeScript, JSON, Markdown, plain text, …).

Supported image formats

Project structure

image-hover-preview/
├── extension.js   ← main extension source
├── package.json   ← extension manifest
└── README.md

How to run locally (VS Code Extension Development Host)

Prerequisites

Steps

1. Copy the project folder to your machine:

   image-hover-preview/
   ├── extension.js
   ├── package.json
   └── README.md
   

2. Open the folder in VS Code:

   code image-hover-preview
   

3. Install dependencies (only dev deps are needed):

   npm install
   

4. Launch the Extension Development Host — press F5 (or go to Run → Start Debugging). VS Code will open a second window titled "Extension Development Host".

5. Test it — in the new window, open any file and type (or paste) an image URL, e.g.:

   https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png
   

   Hover your cursor over the URL. A tooltip with the image preview should appear.

Stopping the development session

Close the Extension Development Host window, or press Shift + F5 in the main VS Code window.

Configuration

You can tweak the preview size in your VS Code settings.json:

{
  "imageHoverPreview.previewSize": 200
}

The value controls both the max-width and max-height of the preview image (in pixels). The aspect ratio is always preserved via object-fit: contain.

Installing permanently (VSIX)

If you want to install the extension permanently without publishing it to the Marketplace, package it with vsce:

npm install -g @vscode/vsce
vsce package          # produces image-hover-preview-1.0.0.vsix

Then install the .vsix file:

VS Code → Extensions panel → ⋯ menu → "Install from VSIX…"

Notes

• The extension registers HoverProvider for both file:// and untitled:// schemes, so it works in saved files and unsaved scratch buffers.
• The MarkdownString is marked isTrusted = true and supportHtml = true so VS Code renders the <img> tag inside the tooltip.
• Images are fetched by VS Code's internal webview renderer — no additional network requests are made by the extension itself.
• Large images are constrained by max-width / max-height CSS, so they never overflow the tooltip.