【VisualStudioCode】オートリロード ができる拡張機能『Live Server』の紹介

htmlファイルを保存し、ブラウザを更新して表示を確認する。
これはhtmlを学んだ人が初めに覚える操作だと思います。
でもその操作、毎回手動でやっていませんか?
プログラミングの世界では、よく行う操作は自動化しちゃえ!という考えが推奨されます。
この記事ではブラウザの更新を自動で行ってくれる便利な拡張機能を紹介します。

オートリロード(自動更新)とは?

html,css,JavaScriptファイルをエディタで書いた後、ブラウザを更新して表示を確認しますよね?
でも毎回、手動で更新するの面倒じゃないですか?
ブラウザの自動更新は便利なんですが、作業を自動化してくれるツールを入れるのも敷居が高い、という人もいるでしょう。
このようなオートリロードはタスクランナー(Gulpとか)で動かしたりするのですが、「コマンドライン分からん」って人は手始めに導入するのもありかなと思います。
マルチディスプレイにして、片方でエディタを開き、もう片方でブラウザを開いておくと、アプリを切り替える必要もなくなるので、オススメです。

『Live Server』インストール方法

インストールは簡単にVSCの拡張機能から『Live Server』をインストールするだけです。

①拡張機能検索から「live」と入力する
②『Live Server』を選択し「インストール」を実行する
③インストール後、「再読込」を押す

liveserverインストール画面

『Live Server』実行方法

インストール後、画面下部のバーに『Go live』という表示が出てきます。
これをクリックするとローカル上でWebサーバーが動き、オートリロードが出来るようなります。

Golive

  • このエントリーをはてなブックマークに追加
  • LINEで送る