Visual Studio Code で Markdown に画像を貼り付けられる markdown.copyFiles.destination 設定メモです。
ちょっと改良しました
この記事は 2024 年 1 月の知見ですが 5 月に少し改良をしました。
Visual Studio Code で Markdown に画像を貼り付けられる markdown.copyFiles.destination 設定メモ 2024 年 5 月改良版
状況
こちらの記事にあるように Visual Studio Code で拡張機能なしでMarkdownに画像を貼り付けられるようになりまして、自分の普段の作業に合う形で調整しました。
できあがった設定
2024/01/28 時点で設定しているものです。
{
"markdown.copyFiles.destination": {
"/base/**/*": "/base/images/${documentBaseName}/${documentBaseName}.${fileName/^(.+)\\.([^.]+)/$2/}"
}
}
設定したものはこちらです。Visual Studio Code の設定ファイルで markdown.copyFiles.destination で設定できます。
${documentBaseName} は記事ドキュメントの名前です。sample-document-001.md であれば sample-document-001 となります。
このように設定できる値は さきほどのリリースノート でも紹介されていますし、設定の説明にも書かれています。
今回は Honkit で使うことを意識して /base フォルダで書かれた .md の Markdown ファイルで画像ファイルをドラッグアンドドロップすると、 /base/images/ フォルダ以下に記事のファイル名と同じ名前のフォルダをつくり、そこに記事のファイル名と同じ名前群で先ほどの画像ファイルをリネームして保存します。
実は、こうしないと、ファイルのドラッグアンドドロップの場合は元々のファイル名を反映され、クリップボードからの画像データをペーストしたときは適当な ID のファイル名を生成する挙動に分かれてしまい記事のファイル名の画像フォルダができても、中ではファイル名が記事ごとに統一されません。
ですので、私の今回の運用に合わせて、どちらの手順でもファイル名が気のファイル名に合わせて統一されるようにしてます。
${documentBaseName}.${fileName/^(.+)\\.([^.]+)/$2/}
そして、後半のこの部分。ドラッグアンドドロップされる画像ファイルは JPEG であったり PNG であったり画像フォーマットが変わりますが、fileName を元にしてこの正規表現で拡張子を保持して保存できます。
このファイルパスのルールで画像ファイルで何枚も保存されていきますが、最初のファイル名からの重複として以降はどんどんと末尾に連番がついて重複せず保存されます。
これは markdown.copyFiles.overwriteBehavior の設定がデフォルトで nameIncrementary になっているので、対応してくれる便利な挙動です。
実際にどう動くか
たとえば 001-inject-debug.md という記事ファイルで、画像ファイルをドラッグアンドドロップしたり、クリップボードに入った画像データをペーストすると、このように images/001-inject-debug フォルダに 001-inject-debug.png 001-inject-debug-1.png 001-inject-debug-2.png と保存されていきます。
もちろん、記事ファイルの中では画像への相対パスが自動生成されます。便利。