Past Image の画像保存先を設定する [vscode]

2024.11.16

VSCode の拡張である Past Image の保存先を指定したディレクトリに変更する方法です。

特に設定せずに画像を貼り付けるとカレントディレクトリにファイルが保存されますが、ファイルが増えてくると、どの MDファイルの画像なのかが分かりづらくなってしまいます。MDファイル名の名前が付いたファイル名やディレクトリに保存されるようにして分かりやすくします。

2種類の設定方法を記載します。

images ディレクトリ下にMDファイル名を付けて保存する

./
├ memo.md
└ images/
  └ memo_2024-11-16-15-36-19.png

images/MDファイル名 のディレクトリ下に保存する

./
├ memo.md
└ images/
  └ memo/
     └ 2024-11-16-15-36-19.png

images ディレクトリ下に保存する場合

images ディレクトリ下にMDファイル名の付いた名前で保存するようにします。

保存場所と Markdown 出力

画像の保存場所と Markdown に貼り付けたときに挿入される内容は次のようになります。

保存場所

./
├ memo.md
└ images/
  └ memo_2024-11-16-15-36-19.png // images 下に MDファイル名_Y-MM-DD-HH-mm-ss.png で保存する

Markdown に貼り付けたときに挿入される内容

![](images/memo_2024-11-16-15-36-19.png)

設定

1. Ctrl + Shift + P を押して、`Preferences: Open *** Settings (JSON)` を選択する

全体に設定する場合は、User Settings (JSON) を選択して、settings.json を開く
Workdpace 毎に設定する場合は、Workspace Settings (JSON) を選択して、.code-workspace を開く

2. “pasteImage.path” と “pasteImage.namePrefix” を追加する

"pasteImage.path": "${currentFileDir}/images",
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",

“pasteImage.path” には、出力したいディレクトリ名を指定し、”pasteImage.namePrefix” には、ファイル名の前に付けたい名前を指定します。

settings.json での記述例 
{
    "pasteImage.path": "${currentFileDir}/images",
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
}

.code-workspace での記述例 
{
    "settings": {
        "pasteImage.path": "${currentFileDir}/images",
        "pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
    }
}

.code-workspace に追加する場合は “settings” 内に追加します。

images/MDファイル名 ディレクトリ下に保存する場合

images/MDファイル名 のように MDファイル名の付いたディレクトリを作って保存するようにします。

保存場所と Markdown 出力

画像の保存場所と Markdown に貼り付けたときに挿入される内容は次のようになります。

保存場所

./
├ memo.md
└ images/
  └ memo/
     └ 2024-11-16-15-36-19.png   // images/MDファイル名下に Y-MM-DD-HH-mm-ss.png で保存する

Markdown に貼り付けたときに挿入される内容

![](images/memo/2024-11-16-15-36-19.png)

設定

1. Ctrl + Shift + P を押して、`Preferences: Open *** Settings (JSON)` を選択する

全体に設定する場合は、User Settings (JSON) を選択して、settings.json を開く
Workdpace 毎に設定する場合は、Workspace Settings (JSON) を選択して、.code-workspace を開く

2. “pasteImage.path” を追加する

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

“pasteImage.path” に出力したいディレクトリ名を指定します。カレントディレクトリ下 images ディレクトリの下に MDファイル名(拡張子なし) のディレクトリを作って保存するように指定しています。

settings.json での記述例 
{
    "pasteImage.path": "${currentFileDir}/images/${currentFileNameWithoutExt}",
}

.code-workspace での記述例 
{
    "settings": {
        "pasteImage.path": "${currentFileDir}/images/${currentFileNameWithoutExt}",
    }
}

.code-workspace に追加する場合は “settings” 内に追加します。