VSCode標準機能でMarkdown画像をAssetsフォルダに自動保存！

Posted at 2025-01-03

VSCodeでMarkdownを記述する際、画像を貼り付けると自動で画像ファイルを保存してくれる便利な機能をご存知ですか？

この機能を活用すれば、画像ファイルの管理が楽になり、Markdownの可読性も向上します。

この記事では、VSCodeの標準機能で、Markdownに画像をコピペする際にAssetsフォルダに自動保存する設定方法を解説します。

VSCodeの設定画面を開く
- Windows/Linux: File > Preferences > Settings
- macOS: Code > Settings > Settings
設定画面から settings.json を開く
- 設定画面右上の Open Settings (JSON) アイコンをクリックします。
  [Image of Open Settings (JSON) icon in VS Code]
settings.json を編集
- settings.json ファイルが開きますので、 "markdown.copyFiles.destination" の設定を追加・変更します。
- 以下の設定を追記してください。
```
"markdown.copyFiles.destination": {
  "**/*": "${currentFileDir}/Assets/${basename}"
},
```
  - "**/*" : すべてのMarkdownファイルに適用することを意味します。
  - ${currentFileDir} は、現在編集中のMarkdownファイルがあるディレクトリを表します。
  - /Assets/ は、画像を保存するフォルダ名です。この設定で、Markdownファイルと同じディレクトリに "Assets" フォルダが自動作成されます。
  - ${basename} は、コピーした画像のファイル名（拡張子を含む）を表します。
設定を保存
- settings.json ファイルを保存します。

これで、Markdownファイルに画像をコピペすると、自動的に "Assets" フォルダが作成され、その中に画像が保存されるようになります。

設定画面を開くには、以下の方法もあります。

コマンドパレットから開く
- Ctrl + Shift + P (Windows/Linux) または Cmd + Shift + P (macOS) を押してコマンドパレットを開きます。
- Preferences: Open Settings (JSON) と入力して Enter を押します。
ショートカットキー
- Ctrl + , (Windows/Linux) または Cmd + , (macOS) を押します。

この設定を活用して、Markdownでの画像管理を効率化しましょう！