Visual Studio Code Live Server の使い方　〜　ウェブサーバを起動してhtmlを編集する方法

LiveServerとは

Live Server とは Visual Studio Codeの拡張機能の1つで、開発中のhtmlやcssなどをローカルウェブサーバを起動してブラウザで表示してくれます。

プレビューにウェブサーバが必要な理由

htmlやcssなどはローカルフォルダに置いているファイルを直接ブラウザで表示させることも可能です。しかし、ウェブサーバで表示させる場合と比べて、外部ファイルの参照方法が異なります。

開発中のタイミングからローカルウェブサーバを使用することで、ズレを無くすことができます。

インストール方法

1. Visual Studio Code の拡張機能の画面を開いて、検索文字列に「LiveServer」を入力します。
2. 表示された結果からLiveServerをクリックして、「Install」をクリックします。

LiveServerを起動してブラウザでページを表示する

まず、簡単にHTMLを作成してみましょう。

HTMLを作成するときは、「html」だけ入力して残りを自動的に生成するのが便利です。

その後、ソースコードを右クリックしてメニューを表示します。

Open with Live Server をクリックします。

すると、自動的にブラウザが起動して編集中のページが表示されます。

ポート番号は？

デフォルトは 5500番ポートになっているようです。

既にポートが使用されていたら？

5500番が使用されていたら、5501番でオープンされました。使用中のポートをチェックして、使用中であれば別ポートで開くようになっているようです。

Visual Studio Codeは機能ありすぎ！

Visual Studio Codeはオープンソースのコードエディタです。

コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。

インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。

そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。

「Visual Studio Code実践ガイド」は、

• Visual Studio Codeの基本的な使い方
• TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
• Visual Studio Code拡張機能の開発方法の紹介

などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。

電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。