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
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリ、ガジェットなどの情報を発信/SIerで10年以上勤務→ストレスMAXで2度休職からの復帰→ブログとWebの学習を行い脱サラ計画中/日々の学習内容をブログにアウトプット/ブログで収益1万円/月は達成/次は5万円/月を目指す/