VScodeのLive Serverとは？拡張機能の使い方を解説

💡 この記事でわかること

Live Serverとは、
👉 HTMLやCSSのファイルを保存すると同時に、ブラウザの表示を自動的に更新してくれるVS Codeの拡張機能です。

HTML/CSSを学び始めたばかりだと、ファイルを保存するたびに毎回ブラウザで手動リロード(再読み込み)する必要があり、地味に手間がかかります。Live Serverを使うと、この手動リロードの手間がなくなります。

💡 また、HTMLファイルをブラウザで直接開く(file://から始まるURL)のではなく、簡易的なローカルサーバー(http://から始まるURL)を立てて表示するため、一部のJavaScript機能(fetchなど)が正しく動作するようになるというメリットもあります。

左側のアクティビティバーにある、四角が4つ組み合わさったようなアイコン(拡張機能)をクリックします。

検索欄に「Live Server」と入力し、Ritwick Deyさん作の拡張機能を選んで「インストール」ボタンをクリックします。

💡 同じような名前の拡張機能が複数表示されることがあります。作者名やダウンロード数を確認して、公式に近いものを選びましょう。

インストールが完了すると、VS Code画面右下のステータスバーに「Go Live」というボタンが表示されます。これをクリックすると、既定のブラウザで現在のプロジェクトが自動的に開きます。

表示したいHTMLファイルをエディタで開いた状態で右クリックし、「Open with Live Server」を選ぶ方法もあります。この方法だと、右クリックしたファイルがそのまま表示されます。

ステータスバーが「Port: xxxx」のような表示に変わっているので、それをクリックすると停止できます。

Live Serverが起動している状態でHTML・CSS・JavaScriptファイルを保存すると、開いているブラウザのタブが自動的にリロードされ、変更が即座に反映されます。

👉 エディタとブラウザを並べて表示しておくと、コードを書きながら見た目の変化をリアルタイムで確認できるので、特にCSSのレイアウト調整がしやすくなります。

フォルダを開かずに単一のファイルだけを開いている場合、ボタンが表示されないことがあります。VS Codeで「フォルダを開く」からプロジェクトフォルダごと開き直してみましょう。

Live Server経由(http://から始まるURL)ではなく、file://から始まるURLでファイルを直接開いたままになっているケースがよくあります。ブラウザのアドレスバーの表示を確認し、http://localhost:から始まっているか確かめましょう。

使用しているポート番号(5500番など)が他のアプリと衝突すると、別の番号に自動的に変わることがあります。番号自体を覚える必要はなく、Go Liveボタンから開いたタブをそのまま使えば問題ありません。

この記事では、VS CodeのLive Server拡張機能の使い方について解説しました。

HTML・CSSを書きながら見た目を確認する作業は非常に多いので、学習を始めたらぜひ早めに導入しておきたい拡張機能です。