Visual Studio Code でサイトを制作している時、毎回 HTML を開いて確認するのは手間ではありませんか?

今回は、Visual Studio Code で制作サイトをすぐに確認する方法を紹介します。

Visual Studio Code の拡張機能

Visual Studio Code の拡張機能に、Live Server があります。

Live Server を利用すると、HTML を保存しただけで、自動的にブラウザに反映されるようになります。

早速追加していきましょう。

まずは、Visual Studio Code を開いて、左側にある、一つだけ四角が離れているアイコンをクリックします。

image2

上の検索欄に、Live Server と入力します。

Live Server をクリックします。

image2

Live Server は、1,100 万人以上がインストールしている、人気の拡張機能です。

イントールをクリックします。

image2

インストールが完了後、『インストールしています』から、『無効にする アンインストール』に表示が変わります。

image2

HTML で利用してみましょう。

制作しているコードを開きます。

右クリックすると、『Open With Live Server』の項目があるので、クリックします。

image2

自動でブラウザが立ち上がって、制作したサイトが立ち上がりました。

image2

では、『晴れ』を『晴れ時々曇り』に変えて、保存してみます。

保存は、ショートカットキー:Windows なら Ctrl+S、Mac なら command+S で簡単に保存できます。

image2

自動で更新されました。

サイトを制作する上で、非常に便利なので、ぜひご利用ください。

Node.js

Visual Studio Code の拡張機能とは別に、Node.js で Live Server を使用することができます。

Node.js のサイトの説明によると、Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境とのことです。

Node.js のサイトに行きます。

推奨版をインストールします。

image2

インストール完了後、Visual Studio Code に戻ります。

上のツールバーの『ターミナル』をクリックします。

新しいターミナルをクリックします。

image2

画面右下に、ターミナルが表示されました。

image2

コマンドに、node -vと入力して、node.js がインストールされているか確認します。

※node.js をすでにお使いの方は、こちらは省略してください。

先程インストールしたバージョンが表示されたら、インストールができております。

image2

Live Server をインストールするために、npm install live-server -gを入力します。

image2

パスワードを聞かれたら、OS でアプリをインストールするときに入力しているパスワードを入力してください。

live-server -vと入力して、Live Server のバージョンが表示されたら、インストールは成功しています。

image2

Live Server を起動するために、ターミナルでlive-serverと入力します。

image2

ブラウザが自動で開きました。

image2

試しに、『晴れ』を『晴れ時々曇り』に変えて、保存してみます。

image2 自動で更新されました。

ターミナルを見ると、index.html が更新されているのがわかります。

image2

Live Server を終了するときは、control+cを押します。

image2

次回起動するときは、ターミナルでlive-serverを入力してください。

これで、効率よく作業ができるようになりました。

ブログ一覧