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


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

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

特徴・使い方


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

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

アイコン・プレビュー表示

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

htmlファイルの場合は、

こんな感じです。

cssファイルの場合は、

こんな感じです。

mdファイルの場合は、

こんな感じです。

Reveal in Side Bar・Open Containing Folder

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

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

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

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

インストール方法

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

  1. アクティビティバーの拡張機能アイコンをクリックし、
  2. 検索ボックスに Image Preview と入力し、
  3. Image Preview の[インストール] をクリックする。

以上です。

コメント

タイトルとURLをコピーしました