VSCodeのhtml・cssのブラウザ確認が超便利! Live Serverのインストール & 使い方


Visural Stadio Codeの拡張機能Live Serverを使うと、html・cssのファイルを作成・保存した後、(ステータスバーに表示されている)[Go Live]をクリックするだけで、ブラウザー確認が可能です。

html・cssの修正時には、(Ctrl + sなどで)ファイル保存するだけで、ブラウザーに変更が反映されます。もちろんブラウザ更新(、つまりリロード)は不要です。

ということで、今日は、VSCodeで、html・cssのブラウザ確認が超便利な拡張機能Live Serverのインストール & 使い方です。

html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。個人的にはいまのところこちらの方がオススメです。
VSCodeのLive Preview インストール方法・使い方・特徴
Visual Studio Codeに、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。インストール方法に加えて、使い方・特徴を簡単にご紹介!

インストール方法


拡張機能Live Serverのインストール & 設定方法は、以下のとおりです。(上の動画でも同じことやっています。)

  1. 画面左にあるアクティビティーバーより、[機能拡張]ビューをクリックし、
  2. 検索欄に live server と入力し、
  3. 表示された機能拡張[Live Server]を選択し、
  4. [インストール]ボタンをクリック。

使い方


基本的な使い方は、以下のとおりです。(上の動画でも同じことやっています。)

  1. エディタ画面に、ブラウザ表示したいhtmlファイルを開いている状態で、
  2. VScod(画面下の)ステータスバーに表示されている [Go Live] をクリックすると、
  3. Live Serverが起動し、htmlがブラウザーが自動表示されます。

さらに、この表示した状態で、html・cssファイルを修正し、ファイル保存するだけもで、ブラウザーに変更が反映されます。

たとえば、htmlファイルを修正し、、、

(Ctrl + sなどで)保存すると、即座にブラウザに反映されます。

同様に、cssファイルを修正し、、、

(Ctrl + sなどで)保存しても、即座にブラウザに反映されます。

Live Serverを停止するときは、、、

VSCode(画面下の)ステータスバーに表示されている [Port:5500] をクリックします。

起動・停止の方法は、他にも

Live Serverの起動・停止の方法は、ステータスバーの[Go Live]・[Port:5500]をクリックする以外にも、以下の方法があります。

エディタ画面内で、右クリックから


エディタ画面内で、右クリックして、Open with Live Serverで起動 または Stop Live Serverで停止できます。

ショートカットキーから

以下のショートカットキー で起動・停止できます。

  • 起動:Alt + lAlt + o
  • 停止:Alt + lAlt + c

コマンドパレットから


コマンドパレットから起動・停止できます

  • 起動:Live Serve: Open with Live Server
  • 停止:Live Serve: Stop with Live Server

自分がやりやすい方法を見つけてくださいね。

ブラウザーの変更も可能

起動するWebブラウザーは、初期設定ではPCで設定しているデフォルトブラウザになります。もちろんEdge、Firefox、Chromeなどに変更可能です。


手順は、以下のとおりです。(上の動画でも同じことやっています。)

  1. Ctrl + , で、設定を開き、
  2. 拡張機能をクリックし、
  3. Live Server Configをクリックし、
  4. Setteing:Custom Browser から、使用したいブラウザーを選択します。

ちなみにnullは、PCで設定しているデフォルトブラウザという意味です。

まとめ

というわけで、今日はVisural Stadio Codeで、html・cssのブラウザ確認が超便利なLive Serverのインストール & 使い方でした。

拡張機能Live Serverを使えば、わざわざエクスプローラで表示して、htmlファイルをダブルクリックして、ファイルを更新したらブラウザーをリロードして、、、なんて面倒なことが不要になります。

なお仕組み的には、VSCode内でローカル開発サーバーが、Webサーバーの代わりをすることで実現しています。

html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。個人的にはいまのところこちらの方がオススメです。
VSCodeのLive Preview インストール方法・使い方・特徴
Visual Studio Codeに、html & css & JavaScriptのプレビュー確認に便利なMicrosoft純正の拡張機能Live Previewが、公開されました。インストール方法に加えて、使い方・特徴を簡単にご紹介!

コメント

タイトルとURLをコピーしました