ツール

IntelliJ IDEA(WebStorm)でライブプレビュー!

IntelliJでライブプレビューってできないのかな?

このような疑問にお答えします。

環境
  • IntelliJ IDEA ULTIMATE 2019.2

HTMLやCSSのコーディングしているとライブプレビュー機能がほしくなりますよね。

ライブプレビュー機能とは

HTMLやCSSを修正したときに自動で画面が更新される機能のこと。
画面の自動更新。

普段、簡易的なエディターとしてはBracketsを利用しているのですが、こちらにもライブプレビュー機能がついています。

しかし、プロジェクトが大きくなるとIntelliJを使ってしまうので、IntelliJでもライブプレビュー使えないのかな?と思ったので調べてみました。

IntelliJでも簡単にライブプレビューを使えたのでご紹介します。

ライブプレビューの使い方!

私の場合、設定不要ですぐに利用できました。

プラグイン:Live Editをインストール

まずはLive Editというプラグインをインストールしてください。
私はすでにインストール済みでした。

インストールした記憶はないので最初から入っていたのかも?

Live Edit

インストールするだけで設定は特に不要だと思います。
気になるのであれば設定を確認してみてください。

画像左中央の「Live Edit」から設定できます。

HTMLをデバッグモードで起動!

あとはデバッグモードで起動するだけです。

HTMLファイルやHTMLが開かれているタブを右クリックして「Debug ‘ファイル名’」を選択してください。

あとがき

ライブプレビューも使えるなんてさすがIntelliJですね。

おそらくWebStormでも同じように使えると思います。

こちらはデフォルトで導入されているプラグインなんですかね?
導入されていれば特に準備も不要でした。

簡単に使えるので使ってみてください!