【Live Server】Visual Studio Codeの便利な拡張機能（基礎知識・使い方）

【Live Server】Visual Studio Codeの便利な拡張機能　（基礎知識・使い方）

Visual Studio Codeの拡張機能「Live Server」について解説。「Live Server」を使用すると「一手間」減らす事ができ、開発が効率的になります。「Live Server」の基礎知識、インストール方法、使い方、設定と徹底解説していきます。

Visual Studio Codeでプログラミンしているけど
「Live Serverって何・・・？」「Live Serverを実践的に取り入れてみたい・・・！」「効率的な開発をしたい・・・！」
そんなお悩みを抱えた人はいませんか？

「Live Server」って聞くと難しそう感じる人もいますが、実は簡単に取り入れることができ「作業効率」をあげる事ができます。

今回は、基礎知識、インストール方法、使い方、設定と全て網羅し徹底解説していきます。

Visual Studio Codeとは？

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

vs codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している（英語、日本語、フランス語、ドイツ語、中国語、ロシア語）などその他、各国の言語に対応している。
4.拡張機能が豊富（デバック機能、コード補完、ソースコードのシンタックスハイライトなど）
5.軽量で早く動く（余計な機能は最初から省かれているので、ストレスなく動く）

今回は、拡張機能【Live Server】について解説します。

【Live Server】とは?

Live Serverとは、vs codeの拡張機能の一つであり、テキストエディタの変更内容をリアルタイムでブラウザに反映できる機能です。
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

仕組みとしては、Live Serverを利用して、ローカルサーバーを立てているので、リアルタイムに変更が反映され、確認する事ができる仕組みです。

Live Serverのインストール方法

まずは下記より「Live Server」をインストールします。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

URLをクリックすると、下記画面に遷移するので、「install」ボタンをクリック

すると下記、メッセージがでますので、「Visual Studio Code」を開くをクリック

インストールボタンを押します。
これで「Live Server」のインストールは完了です。

vs codeを再起動すると「Live Server」が使用できるようになります。

「Live Server」の使い方

まずは、htmlファイルが格納されているフォルダを開きます。
「ファイル」→「開く」でフォルダを開きます。

フォルダを開くと、画面右下に「Go Live」が表示されます。
「Go Live」をクリック

ローカルサーバーが立ち上がり→「HTML/CSS」が反映されたページが開かれます。

コードを修正するとリアルタイムでブラウザに反映されます。

停止したい場合は、画面右下にある「Port:5500」をクリックし停止する事ができます。

「Live Server」を開く別の方法

ファイルを右クリック「Open with Live Server」を選択してもLive Serverを開く事ができます。

指定したブラウザで「Live Server」を開く

「Live Server」が起動するWebブラウザは、PCで設定しているデフォルトブラウザとなります。
これを指定したブラウザで開く方法を解説します。
今回はブラウザ「chrome」を指定します。

設定ボタンを押し、「拡張機能の設定」をクリック。

「liveServer.settings.AdvanceCustomBrowserCmdLine」で
settings.jsonで編集をクリック

“liveServer.settings.AdvanceCustomBrowserCmdLine”: “chrome”,を指定
すると「Live Server」はブラウザ「chrome」で表示されます。

Live Serverには、chrome以外にも、「chrome:PrivateMode」「firefox」「firefox:PrivateMode」「microsoft-edge」「blisk」を指定する事ができます。

ローカルサーバーのホスト名を変更する

ローカルサーバーのホスト名を変更するには、settings画面から「liveServer.settings.host」を選択し変更する事ができます。

ローカルサーバーのポート番号を変更する

ローカルサーバーのポート番号を変更するには、settings画面から「liveServer.settings.port 」を選択し。

settings.jsonでポート番号を変更します。
ポート番号をランダムにしたい場合は0を指定します。

まとめ

今回は、Live Serverの「インストール方法」「使い方」「設定」を解説してきました。
「Live Server」のメリットは、なんといってもリアルタイムで反映を確認しながら開発ができる事です！

いちいち手動でファイルをリロードしなくても良いので、圧倒的に開発効率が上がります。本記事を参考にして頂けたら幸いです。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。