【Live Server】VS Code 拡張機能
Live Serverとは
VSCodeの拡張機能 。ワンクリックでブラウザが開く!さらに自動でブラウザが更新される便利ツール。
インストール方法
左側の拡張機能ボタンをクリック
![左の拡張機能追加を押す](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-151426.png?resize=573%2C397&ssl=1)
インストールする
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-151354.png?resize=1024%2C334&ssl=1)
再起動する。
Live Server 使い方
作成したフォルダーの中にあるhtmlファイルをひらく
画面右下に「Go Live」をクリック
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-154447.png?resize=1024%2C549&ssl=1)
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-154407.png?resize=642%2C91&ssl=1)
ブラウザで開く。
コードを修正していく中で、保存すると自動でブラウザが更新される!
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-153637.png?resize=250%2C307&ssl=1)
※HTMLファイルが格納されているフォルダを開くこと。直接HTMLを開くとできない!
LIVEを停止
LIVEの時は、Portに出ている「Port:5500」をクリックする
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-155400.png?resize=1024%2C515&ssl=1)
他の方法
他には、画面上で左クリックでも開く
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-24-153214.png?resize=1000%2C874&ssl=1)
ディスカッション
コメント一覧
まだ、コメントがありません