VSCodeのPaste Imageを使って画像をサクッとマークダウンに貼り付ける方法

IT・プログラミング

Paste Imageとは？

「Paste Image」は、Visual Studio Code（VSCode）でMarkdownファイルに画像を簡単に貼り付けるための拡張機能です。この機能を使うことで、クリップボードにコピーした画像を素早くMarkdownに挿入でき、効率的な作業が可能になります。

2024年8月現在は、VSCodeのデフォルト機能として、マークダウンへの画像貼り付けが存在しているので、そちらを使うので十分なケースも増えています。

Paste Imageのインストール方法

VSCodeの拡張機能ストアから「Paste Image」を検索し、インストールします。インストールが完了すると、自動的に機能が有効になります。

Paste Imageの使い方

「Paste Image」を使用する際、以下の手順で画像をMarkdownファイルに貼り付けます。

  1. 画像をコピーする（スクリーンショットやウェブからの画像）。
  2. VSCodeのMarkdownファイル上で貼り付けたい位置にカーソルを置く。
  3. ショートカットキー（デフォルト：Ctrl + Alt + V） を使用して画像を貼り付ける。

すると、画像が指定したフォルダに保存され、Markdownファイルには自動的に画像のパスが挿入されます。

画像の保存場所をカスタマイズする

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

  1. 設定ファイル（settings.json） を開く。

  2. 以下のコードを追加し、画像の保存先を指定します。

    json
    "pasteImage.defaultName": "YYYY-mm-dd",
    "pasteImage.path": "${currentFileDir}/images",
    "pasteImage.basePath": "${currentFileDir}"

これにより、画像はimagesフォルダに保存されます。

もしくは、拡張機能のExtension Settings部分から設定できます。

Paste Image defaultNameなどを探して、項目に指定したい値を入力します。

画像のファイル名は、日時などから動的に設定したい場合は、もともと使える予約語が決まっているので、それらを利用するのがおすすめです。

使用可能な予約語

年、月、日トークン

トークン 例 説明
YYYY 2023 4桁の年。厳密モードでは4桁のみ解析可能
YY 23 2桁の年
Y -500 符号付き、桁数無制限の年
Q 2 四半期。四半期の最初の月に設定
M MM 7 月の番号
MMM 7月 ローカルに設定された月の短縮名
MMMM 7月 ローカルに設定された月の完全名
D DD 9 月の日
Do 9日 順序付きの月の日
DDD 190 年の日
DDDD 190 年の日（ゼロ埋めあり）
X 1626043200 Unixタイムスタンプ
x 1626043200000 Unixミリ秒タイムスタンプ

週年、週、曜日トークン

トークン 例 説明
gggg 2023 ローカルの4桁の週年
gg 23 ローカルの2桁の週年
w ww 15 ローカルの週
e 4 ローカルの曜日
ddd 木 ローカルに設定された曜日名（短縮形）
dddd 木曜日 ローカルに設定された曜日名（完全形）
GGGG 2023 ISOの4桁の週年
GG 23 ISOの2桁の週年
W WW 15 ISOの週
E 4 ISOの曜日

ローカル対応フォーマット

トークン 例 説明
L 2023/07/23 日付（ローカルフォーマット）
LL 2023年7月23日 月名、日付、年
LLL 2023年7月23日 15:45 月名、日付、年、時間
LLLL 2023年7月23日（日） 15:45 曜日、月名、日付、年、時間
LT 15:45 時間（秒なし）
LTS 15:45:30 時間（秒あり）

時間、分、秒、ミリ秒、オフセットトークン

トークン 例 説明
H HH 15 時間（24時間制）
h hh 3 時間（12時間制、午前午後を使用）
k kk 15 時間（1から24までの24時間制）
a A 午後 午前または午後（aとpも有効）
m mm 45 分
s ss 30 秒
S SS SSS … SSSSSSSSS 123 小数秒
Z ZZ -04:00 UTCからのオフセット（+-HH:mm、+-HHmm、またはZ）

VSCodeのショートカットを活用する

Paste Imageの操作はショートカットキーで行えるため、手動で画像のパスを指定する手間が省けます。デフォルトのショートカットは「Ctrl + Alt + V」ですが、好みに合わせて設定を変更することも可能です。

まとめ

VSCodeの「Paste Image」機能を活用すれば、Markdownファイルへの画像挿入がスムーズに行えます。設定のカスタマイズやショートカットの活用により、作業効率をさらに向上させることができます。

タイトルとURLをコピーしました