VSCode

VSCodeでLive Serverを使ってブラウザを自動リロードさせる

2020年6月28日

どうもこんばんはヒロシです★

今回は、テキストエディタ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の場合)

という事で、以上でした!

それではまた★

  • この記事を書いた人
  • 最新記事

ヒロシ

ヒロシです。
現在は会社員としてエンジニアの業務を行っています。
担当業務は主に、WordPressサイト開発、改修です。
ブログやプログラミング学習で役に立つ情報を発信しています。

-VSCode

Copyright © ヒロシブログ 2020