VS CodeにおけるPaste Image拡張機能の活用：Markdownへの画像貼り付けを効率化する

はじめに

Markdownによる技術ドキュメントの作成において、画像の貼り付け作業は意外に手間がかかる作業である。スクリーンショットを撮影し、適切な場所に保存し、さらにMarkdown上でリンクを記述する必要があるためである。

本稿では、Visual Studio Code（以下、VS Code）の拡張機能「Paste Image」を導入することで、クリップボード内の画像を自動保存し、Markdownファイル内に即座に貼り付ける方法を紹介する。

Paste Image とは何か

「Paste Image」は、VS Code上でクリップボードにある画像（スクリーンショットなど）を自動的に保存し、Markdownに画像リンクを挿入する拡張機能である。

主な機能

• 画像を保存先ディレクトリに自動で保存
• Markdownの画像リンクを自動挿入
• 保存先やファイル名のルールを柔軟に設定可能

作業手順を簡略化できるため、スクリーンショットを多用する技術記事や社内ドキュメントの作成に特に有用である。

導入手順

1. 拡張機能のインストール

VS Code の拡張機能検索にて「Paste Image」と入力し、以下の拡張機能をインストールする。

• 正式名称：mushan.vscode-paste-image
• マーケットプレイス：Paste Image by mushan

※ moshfeu.vscode-paste-image とは別の拡張機能であるため、間違えないよう注意する。

2. 設定ファイルの作成

拡張機能の動作を制御するために、以下の設定を .vscode/settings.json に記述する。

{
  "pasteImage.path": "${currentFileDir}/images",
  "pasteImage.namePrefix": "img",
  "pasteImage.forceUnixStyleSeparator": true,
  "pasteImage.pasteOnPasteEnable": true
}

各項目の説明

3. 保存先フォルダの作成

設定に従い、画像を保存するための images/ ディレクトリを手動で作成しておくことが望ましい。設定したパスが存在しない場合、貼り付け時にエラーとなることがある。

使用方法

1. スクリーンショットをクリップボードにコピー（例：macOSでは Cmd + Ctrl + Shift + 4）
2. Markdownファイル内でカーソルを画像を挿入したい箇所に置く
3. Ctrl + V（または Cmd + V）で貼り付け操作を実行

成功すれば、画像は指定されたパスに保存され、以下のようなMarkdownリンクが自動で挿入される。

![](images/img_2025-05-04-123456.png)

補足：動作しない場合の確認項目

Paste Image が期待通りに動作しない場合、以下の点を確認する。

• Markdownファイルを保存済みであるか（未保存の状態では動作しない）
• images/ フォルダが既に存在しているか
• .vscode/settings.json に設定が正しく記述されているか
• 拡張機能が mushan.vscode-paste-image であるか
• ショートカットで動作しない場合は、以下の手順で明示的にコマンドを実行する

明示的な実行手順

1. Ctrl + Shift + P（または Cmd + Shift + P）でコマンドパレットを開く
2. Paste Image: Paste from clipboard を選択

これにより、拡張機能が直接呼び出され、画像が挿入される。

カスタムショートカットの割り当て（任意）

頻繁に使用する場合は、独自のショートカットキーを割り当てると効率が向上する。

1. Ctrl + Shift + P → 「Keyboard Shortcuts」を選択
2. Paste Image: Paste from clipboard を検索
3. 任意のキー（例：Ctrl + Alt + V）を割り当てる

おわりに

Markdownによる文書作成において、Paste Image 拡張機能は画像の貼り付け作業を大幅に効率化する。手動での保存・リンク作成といった作業を排除できるため、Markdownドキュメントの作成に多くの画像を利用する開発者・技術ライターにとっては特に有用である。