VSCode x WSL 環境で Zenn 執筆時に画像を楽にコピペできる拡張を紹介
はじめに
Zenn の記事は GitHub で管理し、執筆には VSCode を利用することができます。
しかし、Ctrl + V で画像を貼り付けても、そのままでは Zenn 記事に画像が正しく反映されません。
Zenn の仕様に合わせて画像を挿入するには、paste image 拡張が有力な手段として知られています。
ですが、この拡張は WSL 環境では正常に動作しません。
そこで、本記事では WSL でも使える Udon 拡張を紹介します。
VSCode の画像貼り付けと Zenn の仕様の違い
VSCode で .md ファイルに画像をコピペした場合の挙動は、以下の通りです。
// 記事（.md ファイル）に挿入される画像リンク
// 画像は .md ファイルと同じ階層に保存される
zenn_contents/
└── articles/
├── image.png
└── c983fc42a138cf.md
一方、Zenn では zenn_contents（Github repository）/images/ フォルダの中に画像を配置するルールとなっています。
// この様に画像を保存する必要がある
zenn_contents/
├── articles/
│ └── c983fc42a138cf.md
└── images/
└── image.png
上記仕様に対応する方法として、paste image 拡張機能が有名ですが、WSL 環境では動作しないため、WSL ユーザーには適していません。
この問題を解決してくれるのが、Udon 拡張です。
Udon 拡張について
Ctrl + Alt + V を押す事で、以下の様に画像が挿入することが可能になります。
zenn_contents/
├── articles/
│ └── c983fc42a138cf.md
└── images/
└──c983fc42a138cf/
└── c983fc42a138cf-2025-5-16_1.webp
Udon 拡張については制作者さんの記事をご参照ください。
本項では、私の設定例を紹介します。
筆者の環境
- Windows 11
- WSL2（Ubuntu 22.04.3 LTS）
- VSCode x Dev Containers
zenn_contents/ // workspaceFolder
├── articles/ // 記事用の .md ファイルを配置
└── images/ // .md ファイルで使用する画像を配置
VSCode x WSL での Zenn 執筆環境の詳細はこちらの記事で紹介しています。
設定例
# .md ファイルでコピペした際に画像を保存するフォルダを指定
"udon.baseDirectories": [
["articles/*.md", "${workspaceFolder}/images/$fileBasenameNoExtension"]
],
# .md ファイルに挿入されるリンクの記述ルールを指定
"udon.rule": [
["articles/*.md", ""],
["*.md", ""],
["*", "${relImage:${workspaceFolder}}"]
]
（余談）他に画像を楽にコピペする方法はあるか？
いくつか方法を試した結果、ベターだったのは udon 拡張でした。
ここでは、実際に検討した他の方法についても紹介します。
| 方法 | メリット | デメリット |
|---|---|---|
| VSCode 標準機能 | 拡張不要・公式サポート | Zenn 仕様とパス不整合、手作業多め |
| paste image 拡張 | 一般的・手軽 | WSL 環境で動作しない |
| paste image スクリプト改変 | WSL でも動作可能 | 拡張更新時に再設定必須 |
| Udon 拡張 | WSL 対応・設定簡単 | 実績は少なめ |
案1：VSCode の標準機能を活用する
当初、WSL 環境での Zenn 執筆に VSCode の標準機能を使おうと考えました。
{
"customizations": {
"vscode": {
"settings": {
"markdown.copyFiles.destination": {
"/articles/**/*": "images/articles/${documentBaseName}/"
}
}
}
}
}
しかし、この設定だと .md ファイルに画像を貼り付けた際、 のようにリンクが作成されます。
そのため、Zenn 仕様の  に手動で書き換える手間が発生してしまいます。
案2：paste image 拡張を導入する
WSL 環境では paste image 拡張が正常に動作しなかったため、断念しました。
案3：paste image 拡張の内部スクリプトを改変する
拡張の内部スクリプト（linux.sh）を編集し、WSL から PowerShell 経由で Windows のクリップボード画像を取得する方法です。
この方法は拡張の更新時に再設定が必要となるため、根本的な解決策とは言えず、不採用としました。
おわりに
先日、こちらの記事を読ませていただきました。
Git commit 時に画像パスを書き換えるという方法は、目から鱗でとても面白かったです。
その一方で、Udon 拡張についてはまだあまり知られていない印象を受けました。
私自身とても重宝している拡張なので、この機会にぜひ多くの方に知っていただきたく、本記事を書きました。
Udon 拡張を作ってくださった方、大変助かっております。感謝。
Discussion