MENU
SWELLを使用したサイト構築（HTML、CSS、JavaScript、PHP、ツール）に関するメモ帳

【VSCode】Live Serverで「Open a folder or workspace」が出たときの対処法

広告
その他

VSCodeの便利な拡張機能「Live Server」を使用した時に「Open a folder or workspace」というエラーが表示されたので、その解決方法を残しておきます。

目次

Open a folder or workspaceの解決方法

HTMLファイルをフォルダーに入れて「Live Server」を使用すると、「Open a folder or workspace」は表示されずに、リアルタイムでコーディングができます。

HTMLファイルをフォルダーに入れる

結論、

  1. HTMLファイルをフォルダーに入れる
  2. 「１」のフォルダーをVSCodeで開く
  3. 「Live Server」を使用する

具体例

  1. testフォルダーを作成
  2. aaa.htmlファイルを作成
  3. testフォルダーにaaa.htmlファイルを入れる
  4. testフォルダーを選択し、VSCodeで開く
  5. 「Live Server」を使用する

ちなみに下記のエラーも上記の方法で解決できると思います。

  • 「open a folder or workspace live server…」
  • 「Open a folder or workspace… (File -> Open Folder)」

Open a folder or workspaceの意味

VSCodeでLive Serverを起動しようとした際に

“Open a folder or workspace to launch live server”

（フォルダーまたはワークスペースを開いてLive Serverを起動してください）

というメッセージが表示されることがあります。

これはLive Serverを使用するためには、ファイル単体ではなく、VSCode上で「フォルダー」や「ワークスペース」単位で開く必要があるという制限によるものです。

フォルダーに入れる理由とは？

Live Serverを使うときは、ファイル単体ではなく「フォルダー全体」を開く必要があります。これは、Live Serverが動作するために、以下のような理由があるからです。

スタート地点（ルート）を決めるため

Live Serverは、フォルダー全体を「ミニWebサイト」として扱います。

どこをスタート地点（トップページ）にするかを知るために、フォルダーを開く必要があります。

ファイルのつながりを正しく読み取るため

HTMLの中で読み込む画像やCSS、JavaScriptは、たいてい他のファイルと関係しています。

フォルダーを開くことで、Live Serverはそれらの「つながり」を正しく理解して表示できます。

設定ファイルを読み込むため

VSCodeでは、拡張機能の動き方をフォルダー内の .vscode/settings.json というファイルで調整できることがあります。

この設定を見るためにも、フォルダーを開く必要があります。

つまり、

「Live Server」はプロジェクト全体をちゃんと理解して動かすために、フォルダー単位で開いてもらう必要があります。

VSCodeのLive Serverとは？

保存するたびに即時反映

「Live Server」はVSCodeの人気拡張機能の一つで、静的なHTMLやCSS、JavaScriptの開発時に便利なローカル開発用サーバーを立ち上げることができます。ファイルを保存するたびに自動的にブラウザをリロードしてくれるため、リアルタイムに変更を確認できます。

簡単にまとめると、

保存と同時にブラウザが自動リロードされ、リアルタイムで変更を確認できるVSCodeの拡張機能です。

Live Serverのメリット

リアルタイムプレビュー

ファイルを保存するたびにブラウザが自動でリロードされる。

  • 開発のフィードバックが高速化され、作業効率が向上する。
  • 更新や確認漏れが減る。
  • 保存とリロード回数が減り、開発者の負担が減る。

ローカルサーバーの自動起動

コマンド不要でローカル開発サーバーが自動で立ち上がる。

  • 環境構築にかかる時間と手間を削減でき、すぐにコーディングを開始できる。
  • サーバー構築に関する知識が少ない初心者でもすぐに利用可能。
  • 毎回の起動作業を省けるため、反復的な作業を減らせる。

相対パスの動作検証が可能

HTML内での画像やCSS、JSの相対パスを、ローカルサーバー上で正しく動作させて確認できる。

  • 本番環境と近い挙動でパスの確認ができるため、公開時のバグを未然に防げます。
  • 誤ったファイル参照のトラブルを開発初期段階で発見できる。
  • リンク切れや読み込み失敗のテストも簡単に行える。

スピーディなUI開発

CSSやJavaScriptの変更が即座にブラウザに反映される。

  • スタイリングや動きの試行錯誤を素早く繰り返せる。
  • ユーザーインターフェースの改善や微調整が効率的に進められる。
  • 時間をかけずにプロトタイプを形にできる。

シンプルで導入が容易

拡張機能をインストールするだけで、すぐに使い始められる。

  • 初心者でも複雑な設定不要で利用できる。
  • 他の開発者と同じ環境を素早く共有できる。
  • 軽量なツールのため、PCへの負荷も少なく快適に作業可能。

まとめ｜「Open a folder or workspace」の対処法

  • ファイル単体ではなく「フォルダー全体」をVSCodeで開く
  • Live Serverはファイルの保存時に、ブラウザが自動でリロードされる
その他
よかったらシェアしてね！
  • URLをコピーしました！
目次