VSCodeで、画像ファイルをアイコン・プレビュー表示してくれる拡張機能

VSCode

2021.12.09

Visual Stdio Codeで、html・css・mdファイルなどのエディタ部に、画像ファイルをアイコン・プレビュー表示してくれる拡張機能がImage Previewです。

さらに、エクスプローラービューに画像ファイルを表示したり、画像ファイルが保存されているフォルダーを開くこともできます。

特徴・使い方

拡張機能Image Previewは、htmlファイルのタグ、cssファイルのurl()関数、mdファイルの![]() で指定している画像ファイルを、エディタ部にアイコン・プレビュー表示してくれます。

アイコンはエディタの左側に表示され、プレビューはエディタのコード部分をマウスホバーさせると表示されます。

アイコン・プレビュー表示の様子をみてみます。

htmlファイルの場合は、

こんな感じです。

cssファイルの場合は、

こんな感じです。

mdファイルの場合は、

こんな感じです。

さらにマウスホバーさせると表示される Reveal in Side Bar をクリックすると、

サイドバーのエクスプローラービューに、画像ファイルが表示されます。

同じくマウスホバーさせると表示される Open Containing Folder をクリックすると、

画像ファイルが保存されているフォルダーが開きます

Image Previewのインストール方法は、以下のとおりです。

以上です。