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

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番でオープンされました。使用中のポートをチェックして、使用中であれば別ポートで開くようになっているようです。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱