VSCodeで貼り付けた画像の保存先とファイル名を変更する方法【標準機能】

VS Codeでコピー＆ペーストで画像をMarkdownへ貼り付けると、既定では画像ファイルがMarkdownと同じフォルダに保存される。画像が増えると文書と画像が混在し、目的のファイルを探しにくくなることもある。

VS Codeの標準機能を使えば、貼り付けた画像をimageフォルダへ保存し、Markdownの名前を基にしたファイル名を自動で付けられる。たとえば、manual.mdへ貼り付けた画像をimage/manual.pngとして保存可能だ。

この記事では、設定を適用する範囲の決め方から、設定画面とsettings.jsonによる変更方法、連番の仕組み、保存できないときの確認方法まで解説する。設定画面と1は同じ設定を入力する別の方法なので、使いやすいほうだけを行えばよい。

VS Codeで画像の保存先とファイル名を変更するメリット・デメリット
設定を始める前に適用範囲を決める
設定画面から画像の保存先とファイル名を変更する
settings.jsonから設定する方法
1枚目からファイル名に「-1」を付ける場合の制約
画像の保存先やファイル名を変更できないときの確認方法
画像を管理する際の注意点
まとめ

VS Codeで画像の保存先とファイル名を変更するメリット・デメリット

imageフォルダへまとめるとファイルを整理しやすい

画像をimageフォルダへまとめると、Markdownと画像が混在せず、プロジェクト内を整理しやすくなる。

この記事で紹介する設定では、Markdownと画像の関係が次のようになる。

manual.mdの画像はimage/manual.pngへ保存される
setup.mdの画像はimage/setup.pngへ保存される
同名画像がある場合はmanual-1.png、manual-2.pngと連番が付く

保存先には${documentBaseName}という変数を使用する。この変数は、貼り付け先Markdownの拡張子を除いた名前に置き換わるため、Markdownごとに設定を書き換える必要がない。

ファイル名の自由度には制限がある

同じフォルダ内には、完全に同じ名前のファイルを複数保存できない。複数の画像を貼り付ける場合は、連番を付けるか、既存画像を上書きする必要がある。

既定のnameIncrementallyでは、同名画像があると末尾に番号が付く。overwriteへ変更すれば同じ名前を維持できるが、貼り付けるたびに既存画像が上書きされる。複数の画像を残す用途では、既定の2が安全だ。

また、標準設定には連番を自由に組み立てる変数がない。manual-1.pngから始めて、次をmanual-2.pngにするような命名は、この保存設定だけでは自動化できない。

設定を始める前に適用範囲を決める

VS Codeの設定には、主に「ユーザー」と「ワークスペース」の2つの適用範囲がある。先に範囲を決めておくと、別のプロジェクトまで意図せず設定が反映されるのを防げる。

VS Codeの設定に関する公式ドキュメントでは、それぞれの範囲が次のように説明されている。

ユーザー設定は、VS Codeで開くすべてのプロジェクトへ適用される
ワークスペース設定は、現在開いているプロジェクトへ適用される
同じ設定が両方にある場合は、ワークスペース設定が優先される

プロジェクトごとに画像フォルダの構成が異なる場合は、ワークスペース設定が扱いやすい。どのプロジェクトでも同じルールを使う場合は、ユーザー設定を利用できる。

markdown.copyFiles.destinationは、対象となるMarkdownのパターンと保存先を組み合わせたオブジェクト形式の設定だ。ユーザー設定とワークスペース設定に異なるパターンが登録されている場合は、両方のルールが併存する。同じパターンが重なった場合は、ワークスペース側の値が優先される。

単一のフォルダをワークスペースとして開いている場合、ワークスペース設定はプロジェクト内の.vscode/settings.jsonに保存される。詳細はVS Codeのワークスペースに関する公式ドキュメントでも確認できる。

設定画面から画像の保存先とファイル名を変更する

JSONを直接編集したくない場合は、設定画面から変更する方法がわかりやすい。ここでは、現在のプロジェクトだけに適用するワークスペース設定を例にする。

1. 貼り付け先のMarkdownを保存する

最初に、貼り付け先のMarkdownへmanual.mdなどの名前を付けて保存する。

未保存の文書では、クリップボード上の画像を新しい画像ファイルとして保存する処理が行われない。${documentBaseName}でファイル名を作るためにも、画像を貼り付ける前にMarkdownを保存しておく必要がある。

imageフォルダは事前に作成しなくてもよい。設定した保存先が存在しない場合は、画像を貼り付けたときにVS Codeがフォルダを作成する。

2. 設定画面で保存ルールを追加する

次の手順で保存先を設定する。

VS Codeで対象のプロジェクトフォルダを開く
左下の歯車アイコンをクリックし、「設定」をクリックする
設定画面上部で「ワークスペース」タブをクリックする
検索欄へ@id:markdown.copyFiles.destinationと入力する
Markdown › Copy Files: Destinationで項目を追加するボタンをクリックする。英語表示ではAdd Itemが目印になる
キーへ**/*.md、値へimage/${documentBaseName}.${fileExtName}を入力し、確定用のボタンをクリックする

VSCodeでスクリーンショットの保存先とファイル名を変更する方法【標準機能】
VS Codeで対象のプロジェクトフォルダを開く

左下の歯車アイコンをクリックし、「設定」をクリックする

VSCodeでスクリーンショットの保存先とファイル名を変更する方法【標準機能】
設定画面上部で「ワークスペース」タブをクリックする

検索欄へ@id:markdown.copyFiles.destinationと入力する

Markdown › Copy Files: Destinationで項目を追加するボタンをクリックする。英語表示ではAdd Itemが目印になる

VSCodeでスクリーンショットの保存先とファイル名を変更する方法【標準機能】
キーへ**/*.md、値へimage/${documentBaseName}.${fileExtName}を入力し、確定用のボタンをクリックする

日本語UIの表示名は、VS Codeのバージョンや表示環境によって異なる場合がある。項目が見つからないときは、設定IDの0を目印にすると探しやすい。ワークスペースのタブが表示されない場合は、ファイル単体ではなくプロジェクトフォルダを開いているか確認しよう。

続いて検索欄へ@id:markdown.copyFiles.overwriteBehaviorと入力し、値がnameIncrementallyになっていることを確認する。これは既定値なので、変更していなければそのままでよい。

VSCodeでスクリーンショットの保存先とファイル名を変更する方法【標準機能】
続いて検索欄へ@id:markdown.copyFiles.overwriteBehaviorと入力し、値がnameIncrementallyになっていることを確認する。これは既定値なので、変更していなければそのままでよい。

設定画面で入力した内容は自動で保存される。ユーザー設定へ適用したい場合は、手順3で「ユーザー」タブをクリックし、同じ内容を登録する。

3. 画像を貼り付けて確認する

VS Codeは、クリップボードにコピーした画像をMarkdownへ貼り付ける標準機能を備えている。この機能はVS Code 1.79のリリースノートで案内されており、現在のMarkdown公式ドキュメントでも確認できる。

WindowsのSnipping Toolなどで画像をクリップボードへコピーし、保存済みのmanual.mdを開いてCtrl + Vを実行する。

クリップボードの画像がPNG形式で、同名画像がまだない場合、次のような構成になる。

プロジェクト
├─ manual.md
└─ image
   └─ manual.png

Markdownには画像への相対リンクが追加される。同じmanual.mdへ2枚目、3枚目を貼り付けると、image/manual-1.png、image/manual-2.pngとして保存される。実際の拡張子は、クリップボードから渡される画像形式によって異なる場合がある。

settings.jsonから設定する方法

設定内容をコードとして管理したい場合は、settings.jsonを編集する。設定画面で設定済みなら、この手順を重ねて行う必要はない。

ワークスペース用のsettings.jsonを開く

VS Codeで対象のプロジェクトフォルダを開き、貼り付け先のMarkdownをmanual.mdなどの名前で保存しておく。そのうえで、次の手順で現在のプロジェクトに適用する設定ファイルを開く。

Ctrl + Shift + Pでコマンドパレットを開く
「ワークスペース」「設定」「JSON」をスペースで区切って入力する
ワークスペース設定をJSONで開くコマンドをクリックする。英語表示ではPreferences: Open Workspace Settings (JSON)が目印になる

VSCodeでスクリーンショットの保存先とファイル名を変更する方法【標準機能】
Ctrl + Shift + Pでコマンドパレットを開く

「ワークスペース」「設定」「JSON」をスペースで区切って入力する

ワークスペース設定をJSONで開くコマンドをクリックする。英語表示ではPreferences: Open Workspace Settings (JSON)が目印になる

開いたsettings.jsonへ、次の設定を追加する。

{
  "markdown.copyFiles.destination": {
    "**/*.md": "image/${documentBaseName}.${fileExtName}"
  },
  "markdown.copyFiles.overwriteBehavior": "nameIncrementally"
}

各項目には次の意味がある。

**/*.mdは、設定の適用範囲にあるMarkdownファイルを対象にするパターン
image/は、貼り付け先Markdownの親フォルダを基準にした保存先を表す
${documentBaseName}は、拡張子を除いたMarkdownのファイル名に置き換わる
${fileExtName}は、先頭のドットを含まない画像の拡張子に置き換わる
nameIncrementallyは、同名画像があるときに連番を付ける

たとえば、docs/manual.mdへ貼り付けた画像はdocs/image/manual.pngに保存される。プロジェクト全体で1つのimageフォルダへ集める設定ではなく、Markdownがあるフォルダごとに保存先が決まる。

現行の設定IDはmarkdown.copyFiles.destinationである。古いVS Codeの情報で見かけるmarkdown.experimental.copyFiles.destinationは使用しない。

既存の設定を消さずに追加する

すでにsettings.jsonに設定がある場合は、ファイル全体を上のコードへ置き換えない。既存の一番外側にある{ }の内側へ、必要な項目だけを追加する。

たとえば、既存の設定を残す場合は次のようになる。

{
  "editor.wordWrap": "on",
  "markdown.copyFiles.destination": {
    "**/*.md": "image/${documentBaseName}.${fileExtName}"
  },
  "markdown.copyFiles.overwriteBehavior": "nameIncrementally"
}

既存項目との間にはカンマが必要だ。同じ設定IDがすでにある場合は重複させず、その値を修正する。markdown.copyFiles.destination内に別のパターンがある場合も、必要なルールを消さずに追加または変更しよう。

すべてのプロジェクトへ適用する場合は、コマンドパレットで「ユーザー」「設定」「JSON」を目印に検索する。英語表示ではPreferences: Open User Settings (JSON)に相当するコマンドから、ユーザー用のsettings.jsonを開ける。記述内容はワークスペース用と同じである。

編集後はCtrl + Sで設定ファイルを保存し、前述の「画像を貼り付けて確認する」と同じ方法で動作を確認しよう。

1枚目からファイル名に「-1」を付ける場合の制約

1枚目をmanual-1.pngとして保存するだけなら、保存先へ固定文字列の-1を追加できる。

{
  "markdown.copyFiles.destination": {
    "**/*.md": "image/${documentBaseName}-1.${fileExtName}"
  },
  "markdown.copyFiles.overwriteBehavior": "nameIncrementally"
}

ただし、この-1は連番を表す変数ではない。同名画像がまだなければ1枚目はmanual-1.pngになるが、2枚目はmanual-1-1.png、3枚目はmanual-1-2.pngになる。

VS Code公式ソースのファイル名生成処理では、最初に指定された名前を使用し、同名ファイルが存在すると末尾へ番号を追加する仕組みになっている。また、保存先を組み立てる処理には、2026年9月12日の確認時点で連番用の変数が用意されていない。

そのため、この標準設定だけでmanual-1.png、manual-2.png、manual-3.pngという連番を自動生成することはできない。この命名が必要な場合は、貼り付け後に画像ファイルとMarkdown内のリンクを手動で変更しよう。

画像の保存先やファイル名を変更できないときの確認方法

設定後も期待どおりに保存されない場合は、次の点を確認しよう。

Markdownへ名前を付けて保存してから画像を貼り付けているか
対象パターンが**/*.mdになっているか
${documentBaseName}と${fileExtName}のスペルや波かっこが正しいか
ファイル名と拡張子の間にピリオドがあるか
ユーザー設定とワークスペース設定に競合するルールがないか

settings.jsonを編集した場合は、項目間のカンマや保存忘れも確認する。別のプロジェクト用の設定を開いていないか、設定画面で目的の適用範囲をクリックしているかも確認が必要だ。

貼り付け自体が動作しない場合は、設定画面で@id:markdown.editor.filePaste.enabledを検索する。画像の貼り付けに関わる設定なので、変更していた場合は既定値へ戻して再確認しよう。クリップボードへコピーした内容が、画像データになっているかも確認するとよい。

画像を管理する際の注意点

この設定が適用されるのは、これから貼り付ける画像だ。すでに保存されている画像の移動や改名は行われないため、既存画像も整理したい場合は、画像ファイルとMarkdown内のリンクを確認しながら変更しよう。

また、Markdownの名前を後から変更しても、保存済みの画像ファイル名まで新しいMarkdown名にそろうわけではない。manual.mdをguide.mdへ変更した場合は、既存画像とリンクが正しく対応しているか確認しよう。

画像ファイルを手動で改名するときも、Markdown内のリンクを確認する。リンクが旧名のままなら、新しい画像名へ修正する必要がある。

まとめ

VS Codeでは、markdown.copyFiles.destinationを使って、Markdownへ貼り付ける画像の保存先とファイル名を変更できる。

設定画面とsettings.jsonのどちらか一方でimage/${documentBaseName}.${fileExtName}を設定すれば、manual.mdの画像をimage/manual.pngへ保存できる。同名画像には既定のnameIncrementallyによって連番が付くため、複数の画像を残しながら管理できる。