Markdownでドキュメントを作成していると、画像を挿入したい場面がよくあります。特に、テスト報告書や手順書などでは、スクリーンショットを貼り付けることで、内容がより伝わりやすくなります。
しかし、VSCodeでMarkdownファイルを編集していると、画像の挿入が少し手間に感じることがあります。そこで、今回は「Paste Image」という拡張機能を使って、簡単に画像を貼り付ける方法をご紹介します。
想定する読者
ぼくの共同作業者です。
VSCodeを普段からテキストエディタとして利用している方を想定しています。
Paste Image拡張機能を利用するといいです
「Paste Image」は、クリップボードにコピーした画像を、Markdownファイルに簡単に貼り付けることができるVSCodeの拡張機能です。画像ファイルを自動で保存し、Markdownの記法で挿入してくれます。
👉Paste Image (VSCodeのMarketplace)
インストール方法
-
VSCodeの拡張機能ビューを開きます。
-
「Paste Image」と検索し、提供されている拡張機能をインストールします。
基本的な使い方
-
スクリーンショット(Win + Shift + S / Com + Shift + 4)を撮るなどして、画像をクリップボードにコピーします。
-
Markdownファイルを開き、貼り付けたい位置にカーソルを置きます。
-
Ctrl + Alt + V（Macの場合は Cmd + Alt + V）を押すと、画像が保存され、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編集がより効率的になります。画像の挿入が簡単になることで、ドキュメント作成のスピードも向上します。
ぜひ、活用してみてください。