VisualStudioCode

【VisualStudioCode】ブラウザの自動更新(オートリロード) ができる拡張機能『Live Server』の紹介

HTMLファイルを保存し、ブラウザを更新して表示を確認する。
これはHTMLを学んだ人が初めに覚える操作だと思います。
でもその操作、毎回手動でやっていませんか?
エンジニアの世界では、「単純作業は自動化しちゃえ!」という考えが基本です。
この記事ではブラウザの更新を自動で行ってくれるVisualStudioCodeの拡張機能を紹介します。

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

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

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

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

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

『Live Server』実行方法

インストール後、画面下部のバーに『Go live』という表示が出てきます。
これをクリックするとローカル上でWebサーバーが動き、オートリロードが出来るようなります。
※前提として『フォルダ』を読み込んだ状態、または『ワークスペース』として開いている状態でないと、実行できないので注意です。

Golive

ワークスペースについてはこちらを参照。