HTMLファイルを保存し、ブラウザを更新して表示を確認する。
これはHTMLを学んだ人が初めに覚える操作だと思います。
でもその操作、毎回手動でやっていませんか？
エンジニアの世界では、「単純作業は自動化しちゃえ！」という考えが基本です。
この記事ではブラウザの更新を自動で行ってくれるVisualStudioCodeの拡張機能を紹介します。
オートリロード(自動更新)とは？
HTML,CSSファイルをエディタから保存した後は、ブラウザも更新して表示を確認しますよね？
でも毎回、手動で更新するの面倒じゃないですか？
ブラウザの自動更新は便利なんですが、作業を自動化してくれるツールを入れるのも敷居が高い、という人もいるでしょう。
このようなオートリロードはタスクランナー(Gulpとか)で動かしたりするのですが、「コマンドライン分からん」って人は手始めに導入するのもありかなと思います。
マルチディスプレイにして、片方でエディタを開き、もう片方でブラウザを開いておくと、アプリを切り替える必要もなくなるので、オススメです。
『Live Server』インストール方法
インストールは簡単にVSCの拡張機能タブから『Live Server』をインストールするだけです。
- ①拡張機能検索から「live」と入力する
- ②『Live Server』を選択し「インストール」を実行する
- ③インストール後、「再読込」を押す
『Live Server』実行方法
インストール後、画面下部のバーに『Go live』という表示が出てきます。
これをクリックするとローカル上でWebサーバーが動き、オートリロードが出来るようなります。
※前提として『フォルダ』を読み込んだ状態、または『ワークスペース』として開いている状態でないと、実行できないので注意です。
ワークスペースについてはこちらを参照。
