Help us understand the problem. What is going on with this article?

VSCode拡張機能(自動ブラウザリロード)

HTML CSS JavaScript 学習効率化Live Serverの使い方

使用環境: macOS
エディタ: VSCode

Live Serverとは

VSCode上のファイルの変更を監視して、ブラウザを自動でリロードしてくれるVSCodeの拡張機能です。

通常VSCode使ってプログラミング学習をする場合、
ファイルを編集 -> ブラウザをリロード -> console.logを確認
といった形で学習を進められるかと思います。

そこで、Live Serverを使えばファイルが更新されるたびに
自動でブラウザがリロードされるのでログの確認などがスムーズにおこなえます。

導入は簡単で、VSCodeの拡張機能検索窓(画像の四角のマークをクリック)に
Live Server と入力して検索。
image.png
以下画像のLive Serverをインストールします。
image.png
あとはご自身で作成したindex.htmlファイルなどをVSCodeで開き、
VSCode下部の Go Live をクリックするとOSデフォルトのブラウザでローカルサーバが立ち上がります。
※Go Liveが表示されない場合はVSCodeを一度終了する。
※同様にVSCode下部のPort : 5500 をクリックするとサーバーを停止できます。
image.png
これでファイルが更新されるたびにブラウザがリロードされるようになります。

初学者の方など、少しでも参考いただければ幸いです^^
また、LGTMやコメントいただけると励みになります!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away