Live Serverはちょっと便利

2020-01-11

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

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

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

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

  1. エディタでHTML及び/又はCSSを(新規作成して、あるいは保存済のものを)開いておく
  2. ブラウザでHTMLを開いておく
  3. エディタ でHTML及び/又はCSSを編集する
  4. エディタで HTML及び/又はCSSを保存(Ctrl + S)する
  5. ブラウザでHTMLをリロード(Ctrl + R)する
  6. ブラウザの表示内容を確認する
  7. 3に戻る

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

便利ですね。

  1. エディタでHTML及び/又はCSSを(新規作成して、あるいは保存済のものを)開いておく
  2. エディタのエクスプローラから開きたいファイルを右クリックメニューの[Open with Live Server]で開いておく。
  3. エディタ でHTML及び/又はCSSを編集する
  4. ブラウザの表示内容を確認する
  5. 3に戻る
Live Server のWebページにあるデモです

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

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

Live Serverに関わるVisual Studio Codeの拡張機能と自動保存の設定
Live Serverに関わるVisual Studio Codeの拡張機能と自動保存の設定

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

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

参考