イメージ
WebStorm では、イメージを表示する方法がいくつか用意されています。 ナビゲーションを使用してイメージを取得したり、 外部のグラフィカルエディターでイメージを開くことができます。
対応している画像フォーマット
WebStorm は PNG、SVG、JPG、GIF など、一般的な画像フォーマットに標準で対応しています。
対応している画像ファイルタイプの全リストを確認する
設定 を押して開き、 Ctrl+Alt+S に進んで に移動します。
認識されたファイルタイプ リストで イメージ 項目を探してください。 ファイル名パターン エリアには、WebStorm から開ける画像ファイルのバージョンに合わせた認識可能な拡張子がすべて表示されます。
WebStorm で対応しているファイルタイプの詳細は ファイルタイプの関連付け でご覧いただけます。
画像を表示
WebStorm でイメージを表示する
プロジェクト ツールウィンドウで、イメージファイルを見つけて選択します。
あるいは、エディター内のイメージへの参照にキャレットを置き、 Ctrl+B を押します。
別のタブではなくポップ上へでイメージをプレビューするには、そのイメージへの参照を選択して Ctrl+Shift+I を押します。
外部エディターでイメージを表示する
プロジェクト ツールウィンドウで、イメージファイルを右クリックし、 を選択します。
あるいは、 Ctrl+Alt+F4 を押します。
WebStorm は OS でデフォルトのエディターで画像を開きます。 IDE がファイルを開く 別のイメージエディターを設定できます。
デフォルトの外部エディターを変更する
エディターでイメージを右クリックし、コンテキストメニューから 外部エディターのパスを編集… を選択します。
Ctrl+Shift+A を押して
Edit Path to External Editorと入力することもできます。外部エディターへのパス ダイアログで、画像を開きたいアプリケーションへのパスを指定し、 保存 をクリックします。
画像をインポート
イメージは リソースファイルに属します。 専用のフォルダー「リソースルート 」に保存する必要があります。 プロジェクトにこのフォルダーがない場合は、 新しいディレクトリを作成し、 プロジェクト ツールウィンドウで右クリックして「 」を選択してください。
サンプル
ファイルマネージャーでファイルをコピーし、WebStorm プロジェクト ツールウィンドウのリソースファイルを含むフォルダーに貼り付けます。
表示されたダイアログで、必要に応じてファイル名や保存先を編集してください。 OK をクリックしてください。
プロジェクト ツールウィンドウに貼り付けたイメージを右クリックし、 を選択します。 次に、ポップアップリストから ファイル名 を選択します。
イメージへの参照内にキャレットを置き、 Ctrl+V を押すと保存したイメージ名が貼り付けられます。 または、イメージ名を入力し始めてからコード補完を押すこともできます。
アプリケーションまたはその一部を実行して、イメージが正しく挿入されていることを確認します。