どうもこんばんはヒロシです★
今回は、テキストエディタVSCodeでHTMLやCSSで修正すると自動でブラウザがリロードされるLive Serverという拡張機能を紹介します。
この拡張機能を使う前は、ファイルを修正する度に、手動でブラウザを開いてリロードして確認する必要がありましたが、
この機能を使う事によって、修正した内容が自動でブラウザに反映されるので、毎回手動で確認する手間が無くなる分,効率良く作業が出来る事になるのでオススメです。
それでは、インストールから実際に使うところまで、やってみましょう!
VSCodeでLive Serverをインストールする。
まずは、VSCodeを開き、管理から拡張機能へ行き、Live Serverと検索して、インストールします。
これで、インストールは完了です。
次に、実際にLive Serverを使ってみましょう。
Live Serverの使い方
index.htmlファイルのあるフォルダを開いて、右下にあるGo Liveという箇所をクリックします。
すると、ブラウザ画面でLive Serverが起動します。
これで、ファイルを修正する度に自動でリロードされるようになりました★
停止させたい時は、同じ箇所にあるPort : 5500をクリックすれば、起動前の状態に戻ります。
それと、テキストエディタの画面での右クリックからの起動、停止や、ショートカットキー⌘L ⌘O起動、⌘L ⌘C停止も可能です。(MacOSの場合)
という事で、以上でした!
それではまた★