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

LiveServerとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンク