Home
フロントエンド
【Live Server】VS Codeの拡張機能で自動でブラウザを更新しよう

【Live Server】VS Codeの拡張機能で自動でブラウザを更新しよう

公開日
2022.02.12
更新日
2022.03.04
【Live Server】VS Codeの拡張機能で自動でブラウザを更新しよう

どうも!かけちまるです!

VSCodeでコーディングしているときに、
VSCodeでコードを書く→ブラウザをリロードする→見た目を確認
この作業を手動でやっていませんか?

疲れるので自動化しましょう。
そこで今回はVSCodeの拡張機能である「Live Server」というものをご紹介します。

公式サイト

この記事では、

  • ・Live Serverとは?
  • ・Live Serverのインストール
  • ・Live Serverの使い方
  • ・ファイルを自動保存する方法

がわかります。

Live Serverとは?

Live Serverとは、ローカルサーバーを簡単に立ち上げることができるVSCodeの拡張機能です。

ローカルサーバを立ち上げる以外にも便利な特徴があります。
それは、ライブリロードが行えるという点です。

ライブリロードとは、ファイルの更新を自動で検知しページを更新してくれる機能です。
この機能があることで、例えば、HTMLやCSSなどを編集・保存するとファイルの変更を検知してブラウザを自動でリロードしてくれるのでコーディングを効率的に行うことができます。

Live Serverをインストールする

1

拡張機能へ移動

VSCodeの左メニューから拡張機能をクリックします。

拡張機能へ移動
2

Live Serverをインストール

検索窓に「Live Server」と入力しインストールボタンをクリックしLive Serverをインストールします。

Live Serverをインストール
3

VSCodeの右下に「Go Live」がでればOK!

VSCodeの右下に「Go Live」がでればOK!

Live Serverの使い方

1

VSCode右下の「Go Live」をクリック

VSCode右下の「Go Live」をクリック
2

ファイルを編集するとライブリロードが働く

ファイルを編集するとライブリロードが働く

ファイルを自動保存してもう少しラクしよう

Live Serverのライブリロード機能でファイルを保存すると自動でブラウザが更新されるようになりました。

もう少しラクしたいということでVSCodeの設定で編集したファイルを自動保存するように設定しましょう。

1

メニューバーのファイル > 自動保存をクリック

VSCodeのメニューバーからファイル > 自動保存をクリックしチェックが付いたら設定完了です。

メニューバーのファイル → 自動保存をクリック

スマホからもアクセスする方法

実は、Live Serverで立ち上げたローカルサーバーにスマホからもアクセスできるのです。
サーバーにアップせずとも実機でサイトを確認できるので便利ですね。

少し設定が必要なのでその説明をします。
もちろんLive Serverがインストールされている前提です。

1

設定を開く

メニューバーのCode > 基本設定 > 設定で設定を開きます。

Code → 基本設定 → 設定
2

「Use Local Ip」項目の「Use Local Use Local IP as host」にチェックを入れる

設定サイドバーから「Live Server Config」に進み、「Use Local Ip」項目の「Use Local Use Local IP as host」にチェックを入れる。

「Use Local Use Local IP as host」にチェックを入れる
3

Live Serverでローカルサーバーを立ち上げる

Live Serverの使い方で説明したようにローカルサーバーを立ち上げます。

4

スマホでローカルサーバーのURLにアクセスする

ここで注意が必要で、PCに繋いでいるネットワークと同じものにスマホを繋いでいる必要があります。

これで、スマホからもアクセスできるようになったかと思います。
しつこいようですが、PCに繋いでいるネットワークと同じものにスマホを繋いでいる必要があります。

まとめ

結構簡単に設定できたのではないでしょうか?
簡単な割に費用対効果が高いように思えます。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【CSSのみ】背景のグラデーションを変化させるアニメーション

【CSSのみ】背景のグラデーションを変化させるアニメーション

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

floatで雑誌のようなテキストの回り込みを表現する

floatで雑誌のようなテキストの回り込みを表現する

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

【WordPress】カテゴリーの記事数を取得する方法

【WordPress】カテゴリーの記事数を取得する方法