Macアプリ

【VSCode】live serverが表示されない時の対処方法

VSCode(Visual Stadio Code)のリアルタイムプレビューの拡張機能「Live Server」

Web開発には必須レベルと言っても良い拡張機能です。

そんな「Live Server」ですが、ファイルの開き方によっては「Live Server」を起動する「GO Live」ボタンが表示されないことがあります。

今回はその対処方法をご紹介します。

結論

結論から言うとVSCodeでhtmlファイルを直接開くのではなく、htmlファイルが格納されているフォルダを開けばOKです。

①VSCodeを起動し、「ファイル」→「開く」をクリックする。

②リアルタイムプレビューを行いたいhtmlファイルが格納されているフォルダを選択する。
*画像の例ではindex.htmlがリアルタイムプレビューを行いたいhtmlファイルになります。

③VSCodeの右下に「GO Live」ボタンが表示されるので、クリックします。

④ブラウザが起動され、リアルタイムプレビューが開始されます。

htmlファイルを直接開いてしまった場合

htmlファイルを直接開いてしまった場合の例です。

①VSCodeを起動し、「ファイル」→「開く」をクリックする。

②リアルタイムプレビューを行いたいhtmlファイルを選択する。

③VSCodeの右下に「GO Live」ボタンが表示されません。

こうなってしまった場合は、ファイルを閉じてフォルダを開きなおせばOKです。

\VSCodeをマスターしたいならコレ/

ABOUT ME
Jyu2
ソフトウェア会社(SIer)で10年以上勤務のシステムエンジニア|ポケットWiFi使用歴2年以上|ポケットWiFi+αで快適でお得なインターネット環境を構築するための情報を発信|その他、IT情報やWebサービス、アプリ、ガジェットなどの情報を発信|自分と他の人のカバンの中身を紹介するメディア「カバンの中身ラボ(https://kaban-no-nakami-labo.com/)」も運営しています。 ポケットWiFi選びに迷ったらTwitter、お問合せフォームからご連絡ください。