🔥
VS Code で画像貼り付けしたら、関連ディレクトリ配下のデータを丸々飛ばしそうになった。
経緯
- VS Code で Zenn の記事を書く際、ストレージの容量を気にしなければ、画像をローカルで管理するのが楽。
- VS Code 上で md ファイルにクリップボードから画像を貼り付けると、同じ階層に画像ファイルが保存される。
- しかし GitHub 連携を使っている場合、ルートフォルダー直下の images フォルダーに画像を入れる必要がある（Zenn 側の仕様）。
- 画像の保存先を自動で良い感じにしたくて、VS Code 拡張機能「Paste Image」を使うことに。（使用法などは下記リンク参照）
- なぜか思った場所に保存されず試行錯誤しているうちに、Book のフォルダー名末尾に「..」が付いていることに気づく。（例：「
foobar..」） - エクスプローラーから操作しても、フォルダー名の変更ができない。フォルダーのなかを見ることもできない（エクスプローラーのアドレスバーで
path/foobarのように指定しても開けない）。何かしようとすると inaccessible なんとかと書かれたダイアログが表示される。 - どうも Paste Image の設定をいじる際、パスの設定で「
${currentFileDir}/../images」と書くべきところを「${currentFileDir}../images」としていたのが原因っぽい（/../を../にしてしまっていた）。 - 保存先ディレクトリが存在しない場合に自動で作成する仕様なのはわかるが、その際に既存のフォルダー名が上書きされるとは思ってもいなかった。
- Zenn Editor のプレビューもスタックしているのか、表示できない状態になった。
解決策
-
エクスプローラー上で
Ctrl + Zしたら直った。 -
正確には、
foobar..フォルダーだけ見える状態から、foobarフォルダーとfoobar..フォルダーの２つが表示されている状態になった（このとき、なぜかfoobar..のなかも見ることができるようになった。中身はfoobarと同じだった。パスが同一だったかまでは覚えていない）。この状態でfoobar..フォルダーを削除したところ、もとの正常な状態に戻った。
余談
結局、Paste Image の設定は以下のようにしました。
- Base Path:
${projectRoot} - Insert Pattern:
${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix} - Path:
${projectRoot}/images
- 本当は保存先を記事ごとに分けたかった。（
images/slug/2024-05-05-19-23-37.pngみたいに） - そこまでカスタムできないっぽい？
-
slugの部分を自動で入れる方法があれば教えてほしい。
Discussion