今日は、マナブさんのブログ記事「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」で紹介されていた Google ChromeのDeveloper Tool に関する数々の動画を見ました。

その動画の一つで、Live Server というのが、ついでにちらっと紹介されていました。

Developer Tool が神ツールなのに対し、Live Server も地味に便利だったので紹介します。

ドットインストールなどでHTMLやCSSを習い始めて直ぐに覚えるやり方として、次の操作の繰り返しがあります。

上記3,4,5のうち、4と5を省略し、次のようになります。

便利ですね。

このデモを見ていると、保存さえしていないように見えますが、私の Visual Studio Code の初期設定ではファイルの保存を省略できませんでした。

Visual Studio Code を自動保存の設定(Auto Save)に変更することにより、エディタの保存操作とブラウザのリロード操作の両方が省略できるようになりました。

Live Serverは、Visual Studio Code だけでなく、Atom Editor や Sublime Textでも利用できるようです。

なお、自動リロード機能を停止するには、上の図の下に表示されている“Port:5500”というところをクリックします。

参考