ふりぶろぐ
Web Engineer's Blog
IntelliJ IDEA

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でも同じように使えると思います。

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

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

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。