メモ。
- VSCode（Visual Sutdio Code）では現在、標準機能としてクリップボードからの画像貼付けをサポートしている。
- 貼り付けた画像の保存先、保存ファイル名は設定項目
markdown.copyFiles.destinationで指定できる。 - 正規表現によるカスタマイズもできる。
VSCodeでMarkdownにクリップボードから画像貼付け
標準機能として「ファイルへの画像やリンクの挿入」が可能になっている（以前は標準機能ではなくてプラグインを使用していた気がする）。以下の引用部は、左記からの抜粋。
-
画像ファイルのドラッグ＆ドロップ で挿入が可能。
VS CodeのエクスプローラーまたはOSからMarkdownエディターにファイルをドラッグ＆ドロップできます。まず、VS CodeのエクスプローラーからMarkdownコードの上にファイルをドラッグし、 Shiftキーを押しながらドロップを開始します。ドロップすると、プレビューカーソルに挿入場所が表示されます。
-
クリップボード経由でのコピー＆ペースト も可能。
キーボードを使いたい場合は、ファイルや画像データをコピーしてMarkdownエディターに貼り付けることもできます。ファイル、ファイルへのリンク、またはURLを貼り付ける際、Markdownリンクを挿入するか、リンクをプレーンテキストとして挿入するかを選択できます。
-
コマンドでの挿入 も可能。
または、 「Markdown: ワークスペースから画像を挿入」コマンドを使用して画像を挿入し、 「Markdown: ワークスペース内のファイルへのリンクを挿入」コマンドを使用してファイル リンクを挿入することもできます。
貼り付けた画像の保存先
- 画像はワークスペース内にファイルとして保存（コピー）される。
デフォルトでは、VS Codeはワークスペース外にドロップまたは貼り付けられた画像をワークスペースに自動的にコピーします。
- 保存時のパス（保存先や保存ファイル名）は設定項目
markdown.copyFiles.destinationで指定可能。markdown.copyFiles.destinationこの設定は、新しい画像ファイルの作成場所を制御します。この設定は、現在のMarkdown文書に一致するグロブを画像の保存先にマッピングします。 - Markdown文書のベース名、貼り付けたファイルのベース名や拡張子など、いくつかの変数が利用できる。
画像の保存先には、いくつかの単純な変数を使用することもできます。
markdown.copyFiles.destination使用可能な変数に関する情報については設定画面の説明を参照してください。 - 正規表現で変数を変換することもできる。
スニペットと同様に、単純な正規表現を使って変数を変換することもできます。例えば、次の変換では、メディアファイルを作成する際にドキュメントファイル名の最初の文字のみを使用します。
"markdown.copyFiles.destination": { "/docs/**/*": "images/${documentBaseName/(.).*/$1/}/" }
使用できる変数
本メモ作成時点で、設定画面の説明によれば以下の変数が利用できる。
- Markdownドキュメントの情報
-
${documentDirName}— Markdown ドキュメントの親ディレクトリの絶対パス。例: /Users/me/myProject/docs。 -
${documentRelativeDirName}— Markdown ドキュメントの親ディレクトリの相対パス。例: docs。ファイルがワークスペースに含まれていない場合、これは ${documentDirName} と同じです。 -
${documentFileName}— Markdown ドキュメントの完全なファイル名 (例: README.md)。 -
${documentBaseName}— Markdown ドキュメントのベース名 (例: README)。 -
${documentExtName}— Markdown ドキュメントの拡張子 (例: md)。 -
${documentFilePath}— Markdown ドキュメントの絶対パス (例: /Users/me/myProject/docs/README.md)。 -
${documentRelativeFilePath}— Markdown ドキュメントの相対パス (例: docs/README.md)。ファイルがワークスペースに含まれていない場合、これは ${documentFilePath} と同じです。 -
${documentWorkspaceFolder}— Markdown ドキュメントのワークスペース フォルダー (例: /Users/me/myProject)。ファイルがワークスペースに含まれていない場合、これは ${documentDirName} と同じです。
-
- ドロップされたファイルの情報
-
${fileName}— ドロップされたファイルのファイル名 (例: image.png)。 -
${fileExtName}— ドロップされたファイルの拡張子 (例: png)。
-
- 現在時刻
-
${unixTime}— 現在の Unix タイムスタンプ (ミリ秒)。 -
${isoTime}— ISO 8601 形式の現在の時刻 (例: '2025-06-06T08:40:32.123Z')。
-
私の設定
私の現在の markdown.copyFiles.destination 設定は下記。
| 項目 | 値 |
|---|---|
* |
${documentBaseName}/${isoTime/^(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).+/$1$2$3-$4$5$6Z/}.${fileExtName} |
以下に保存される。Markdownドキュメントと添付ファイル（画像）をまとめて操作しやすいフォルダ分け。そしてファイル名は日時にしておけば、使わなくなったファイルを含めて何とか把握、管理できるだろうという超整理法脳。
<Markdownドキュメントのベース名>/<年月日>-<時分秒>Z.<拡張子>
ファイル名は ${isoTime} （ISO 8601 形式の現在の時刻）を元に、正規表現で <年月日>-<時分秒>Z に変換、その後ろに ${fileExtName} で元々のファイル拡張子を残している。