初心者向け

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

intellij-idea-live-preview

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

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

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

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

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

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