VS Codeで画像をコピペ！設定ひとつで楽々画像管理

Posted at 2025-01-03

Visual Studio Code（VS Code）でMarkdownファイルを編集する際、画像を貼り付ける作業は頻繁に発生しますよね？

いちいち画像を保存して、パスを指定して… と面倒な手順を踏んでいませんか？

実はVS Codeには、画像をコピー＆ペーストするだけで自動的に指定フォルダに保存してくれる便利な機能が備わっています。

設定方法はいくつかありますので、ご自身に合った方法を選んで設定してみてください。

設定を開く

VS Codeの左下にある歯車アイコンをクリックし、「設定(Settings)」を開きます。

[Image of VS Code settings icon]
Markdownの設定を探す

設定画面上部の検索バーに "markdown.copyFiles.destination" と入力します。

[Image of VS Code settings search bar]
設定値を追加

markdown.copyFiles.destination の項目に、以下の設定を追加します。
```
"markdown.copyFiles.destination": {
  "**/*": "./Assets/"
},
```
この設定により、全てのMarkdownファイルにおいて、画像をコピー＆ペーストすると、Assetsフォルダに画像が保存されます。

[Image of VS Code settings with markdown.copyFiles.destination]

設定を開く

VS Codeの左下にある歯車アイコンをクリックし、「設定(Settings)」を開きます。

[Image of VS Code settings icon]
settings.jsonを開く

設定画面上部のタブで「JSON」を選択します。

[Image of VS Code settings JSON tab]
Markdownの設定を探す

settings.json ファイル内で "markdown.copyFiles.destination" を探します。既に設定がある場合は、その部分を編集します。
設定値を追加

"markdown.copyFiles.destination" の項目に、以下の設定を追加します。
```
"markdown.copyFiles.destination": {
  "**/*": "./Assets/"
},
```
この設定により、全てのMarkdownファイルにおいて、画像をコピー＆ペーストすると、Assetsフォルダに画像が保存されます。

コマンドパレットを開く

Ctrl + Shift + P (Windows/Linux) または Cmd + Shift + P (macOS) を押してコマンドパレットを開きます。
設定を開く

コマンドパレットに Preferences: Open Settings (JSON) と入力してEnterキーを押します。
Markdownの設定を探す

settings.json ファイル内で "markdown.copyFiles.destination" を探します。既に設定がある場合は、その部分を編集します。
設定値を追加

"markdown.copyFiles.destination" の項目に、以下の設定を追加します。
```
"markdown.copyFiles.destination": {
  "**/*": "./Assets/"
},
```
この設定により、全てのMarkdownファイルにおいて、画像をコピー＆ペーストすると、Assetsフォルダに画像が保存されます。

設定が完了したら、あとは画像をコピーしてMarkdownファイルに貼り付けるだけです。

すると、Assetsフォルダに画像が自動的に保存され、Markdownファイルには画像へのパスが記述されます。

この設定により、画像の管理が劇的に楽になります。

ぜひこの機能を活用して、快適なMarkdown編集を実現しましょう！