Markdownでドキュメントを作成していると、画像を挿入したい場面がよくあります。特に、テスト報告書や手順書などでは、スクリーンショットを貼り付けることで、内容がより伝わりやすくなります。

しかし、VSCodeでMarkdownファイルを編集していると、画像の挿入が少し手間に感じることがあります。そこで、今回は「Paste Image」という拡張機能を使って、簡単に画像を貼り付ける方法をご紹介します。

想定する読者

ぼくの共同作業者です。
VSCodeを普段からテキストエディタとして利用している方を想定しています。

Paste Image拡張機能を利用するといいです

「Paste Image」は、クリップボードにコピーした画像を、Markdownファイルに簡単に貼り付けることができるVSCodeの拡張機能です。画像ファイルを自動で保存し、Markdownの記法で挿入してくれます。

デフォルトでは、画像はMarkdownファイルと同じディレクトリに保存されますが、設定を変更することで、別のフォルダに保存することも可能です。

例えば、画像をimagesフォルダに保存したい場合は、以下の設定を.vscode/settings.jsonに追加します。

{
  "pasteImage.path": "${currentFileDir}/images"
}

これにより、画像がimagesフォルダに保存され、Markdownには相対パスで挿入されます。

${projectRoot}

なども利用できます。

使い始めに意外とハマるポイントがあります。まとめました。

ミス例	原因と対策
`Ctrl + V`で貼り付けた	通常のペースト。Paste Imageのショートカットを使う必要あり
Markdownファイル未保存	`${currentFileDir}` が解決できずプロジェクトルートに保存される
パスに `\` を使っている	Windowsのクセ。必ず `/`（スラッシュ）を使おう
VSCode再起動していない	設定反映されない場合があるので再起動必須

「Paste Image」拡張機能を使うことで、VSCodeでのMarkdown編集がより効率的になります。画像の挿入が簡単になることで、ドキュメント作成のスピードも向上します。

ぜひ、活用してみてください。