HikariBlog
Webエンジニア向けブログ
初心者向け

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

intellij-idea-live-preview

今回はこのような質問をいただきました。

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

フロントエンド開発で欠かせないのがライブプレビューですよね。

そこで今回はこちらの質問について解説していきます!

環境
  • IntelliJ IDEA ULTIMATE 2019.2

ライブプレビューとは?

ライブプレビューとは?

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

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

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

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

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

まずはLive Editというプラグインをインストールしてください。

私はすでにインストール済みでした。

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

Live Edit

インストールするだけで設定は特に不要だと思います。

気になるのであれば設定を確認してみてください。

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

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

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

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

Debug

あとがき

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

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

こちらはデフォルトで導入されているプラグインなんですかね?

導入されていれば特に準備も設定も不要でした。

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