Image Comment - VSCode Extension

A VSCode extension that automatically saves pasted images and inserts comment references.

English | 简体中文

✨ Features

🖼️ Auto-detect image paste: Automatically detects images in clipboard (supports screenshots, copied image files, etc.)
💾 Auto-save images: Saves images to a specified folder in the project directory (default: .image-comment)
📝 Auto-insert comments: Automatically inserts image reference comments at the paste position
🌍 Multi-platform support: Supports macOS, Windows, and Linux
🔧 Smart comment format: Automatically selects appropriate comment format based on file type
🌐 Internationalization: Supports English, Simplified Chinese, and Traditional Chinese
⚙️ Configurable options: Supports custom save directory, comment template, etc.
📋 Context menu: Provides convenient right-click menu option

📦 Installation

Install from VS Code Marketplace (Recommended)

Direct Link: Install from Marketplace

Or follow these steps:

Open VS Code
Press Ctrl+Shift+X (macOS: Cmd+Shift+X) to open the Extensions panel
Search for "Image Comment"
Click Install

Install from Source

Clone or download this repository:

git clone https://github.com/HEKEH/vscode-image-comment.git
cd image-comment

Install dependencies and compile:
```
npm install
npm run compile
```
Press F5 in VS Code to open the Extension Development Host for testing
Or package as a .vsix file:
```
npm install -g vsce
vsce package
```
Then install the generated .vsix file in VS Code using "Install from VSIX"

🚀 Usage

Copy an image to clipboard (supports the following methods):
- Take a screenshot (macOS: Cmd+Shift+4, Windows: Win+Shift+S, Linux: use system screenshot tool)
- Copy image file (copy image file in file manager)
- Copy image from browser or other applications
Right-click in the code editor and select "Paste Image as Comment"
The extension will automatically:
- Detect the image in clipboard
- Save the image to the .image-comment folder
- Insert a comment at the current position

Method 2: Command Palette

Copy an image to clipboard
Press Ctrl+Shift+P (macOS: Cmd+Shift+P) to open the Command Palette
Type "Paste Image as Comment" and select it

📝 Examples

Example 1: JavaScript/TypeScript

// ![image](https://github.com/HEKEH/vscode-image-comment/raw/HEAD/.image-comment/image-20241225-120000-abc123.png)

Example 2: Python

# ![image](https://github.com/HEKEH/vscode-image-comment/raw/HEAD/.image-comment/image-20241225-120000-abc123.png)

Example 3: HTML

<!-- ![image](https://github.com/HEKEH/vscode-image-comment/raw/HEAD/.image-comment/image-20241225-120000-abc123.png) -->

Example 4: Markdown

![image](https://github.com/HEKEH/vscode-image-comment/raw/HEAD/.image-comment/image-20241225-120000-abc123.png)

⚙️ Configuration Options

You can configure the following options in VS Code settings:

Configuration	Type	Default	Description
`imageComment.saveDirectory`	string	`.image-comment`	Directory name to save images (relative to workspace root)
`imageComment.commentTemplate`	string	`![image](https://github.com/HEKEH/vscode-image-comment/raw/HEAD/{path})`	Comment template, use `{path}` as placeholder for image path
`imageComment.useRelativePath`	boolean	`true`	Whether to use relative path in comments

Configuration Example

Add the following to VS Code settings (settings.json):

{
  "imageComment.saveDirectory": ".images",
  "imageComment.commentTemplate": "<!-- Image: {path} -->",
  "imageComment.useRelativePath": true
}

🎨 Supported Comment Formats

The extension automatically selects the appropriate comment format based on file type:

Language	Single-line	Multi-line
JavaScript/TypeScript	`//`	`/* */`
Python	`#`	`""" """`
Java/C/C++/C#/Go/Rust	`//`	`/* */`
HTML	-	`<!-- -->`
CSS/SCSS/Less	`//`	`/* */`
SQL	`--`	`/* */`
Shell/Bash	`#`	`: <<'EOF' ... EOF`
Ruby	`#`	`=begin =end`
PHP	`//`	`/* */`
Swift/Kotlin/Scala	`//`	`/* */`
YAML	`#`	-
JSON	-	`/* */`

🖼️ Supported Image Formats

PNG
JPEG/JPG
GIF
WebP
BMP
SVG

Note: Maximum image size is 50MB.

🌐 Internationalization

The extension supports the following languages:

English
Simplified Chinese (zh-CN)
Traditional Chinese (zh-TW)

The language will automatically switch based on VS Code's language setting.

💻 System Requirements

macOS

No additional tools required, uses system clipboard API

Windows

Requires PowerShell (included by default, Windows 10+ has it pre-installed)

Linux

Requires xclip to be installed:

# Ubuntu/Debian
sudo apt-get install xclip

# Fedora/CentOS
sudo dnf install xclip
# or
sudo yum install xclip

# Arch Linux
sudo pacman -S xclip

# openSUSE
sudo zypper install xclip

🔧 Development

Requirements

Node.js >= 16
npm >= 8
VS Code >= 1.74.0

Development Commands

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode compilation (for development)
npm run watch

# Package extension
npm install -g vsce
vsce package

Project Structure

image-comment/
├── src/
│   ├── extension.ts      # Main extension file
│   ├── nls.ts           # Internationalization support
│   └── nls.*.json       # Language files
├── out/                 # Compiled output directory
├── package.json         # Extension configuration
└── tsconfig.json       # TypeScript configuration

❓ FAQ

A: Make sure:

The editor has focus
The editor is not in read-only mode
No text is selected

Q: Where are images saved?

A: By default, images are saved in the .image-comment folder in the workspace root. You can change the save location by modifying imageComment.saveDirectory in settings.

Q: How to modify the comment format?

A: Modify imageComment.commentTemplate in VS Code settings, using {path} as a placeholder for the image path.

Q: What image formats are supported?

A: Supports common image formats such as PNG, JPEG, GIF, WebP, BMP, SVG.

Q: Is there a size limit for images?

A: Yes, the maximum supported image size is 50MB.

📄 License

MIT License

If this extension is helpful to you, please give it a ⭐ Star!

Image Comment

hekai gustav