Visual Studio Code の Live Server で 「open a folder or workspace live server...」が出たときの 対処法 ～画像付き解説～

# 目的
- Live ServerでリアルタイムでHTMLコーディングしたいのに「open a folder or workspace live server...」と出てる現象の解決

# この記事のターゲット
- Live Serverを用いてHTMLとCSSをコーディングしたいのにサーバを起動できない方
- Live Serverを起動しようとしてもVisual Studio Codeの画面左下に「Go Live」の文字が出ない方
- エディタ画面右クリックでサーバを起動させようとしても「open a folder or workspace live server...」と出力されてサーバが起動しない方

# 前提条件
- 自分のPCにVisual Studio Codeが導入されていること。(まだ導入されていない方は[こちら](https://qiita.com/miriwo/items/306769d90d910944e471)を参考にインストール)
- Visual Studio CodeのプラグインであるLive Serverがインストールされていること。
- ファイルの拡張子(.txtや.exeなど)が表示される設定になっていること。(まだファイル名に拡張子が表示されていない方は[こちら](https://qiita.com/miriwo/items/5abbe81fc920381fb286)を参考に拡張子を表示)  
※本記事はWindows10での記載方法をまとめるため、macOS、Linuxは参考にならない場合有り。

# 必要ファイルの準備
任意のフォルダに下記の手順でLive Serverテスト用のフォルダとファイルを作成する。

- 自分のPCの任意のフォルダに移動する。
- 「practice」フォルダを作成する。
- 「practice」フォルダの中に「css」フォルダと「index.html」ファイルを作成する。
- 「css」フォルダの中に「css-test.css」ファイルを作成する。
- 「index.html」をVisual Studio Codeで開き下記の内容を記載する。

``` html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Live Server test</title>
    <link rel="stylesheet" href="./css/css-test.css">
  </head>
  <body>
    <header>
    </header>
    <div class="main">
      <h1>Hello Live Server!</h1>
    </div>
    <footer>
    </footer>
  </body>
</html>
```
- 「css-test.css」をVisual Studio Codeで開き下記の内容を記載する。

```css
.main h1 {
  font-style: 32px;
}
```

- 下記のフォルダ構成になっていることを確認する。

```
practice
  ┗index.html
  ┗css
    ┗css-test.css
```
- Visual Studio Codeを一旦終了する。

# 準備したファイルとフォルダをVisual Studio Codeで開く
※筆者のスクリーンショットでは設定済みのために画面右下に「Go Live」の文字が出てしまっています。
1. Visual Studio Code画面の左上の「ファイル(F)」をクリック
  ![VisualStudioCode_Live Server_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/61e88649-3445-3e68-5a97-433b67437a37.png)

2. 「フォルダーを開く...」 → 先ほど作成した「practice」フォルダを選択 → 「フォルダーの選択」をクリック
  ![VisualStudioCode_Live Server_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/dedaa12d-fa99-60a1-2746-5e79d122f11f.png)

3. 画像の矢印がさしているVisual Studio Code画面の色の境目付近にマウスカーソルをもっていくと両端矢印が表示される → 左クリックを押しっぱなしで右にマウスを動かす。
  ![VisualStudioCode_Live Server_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b78c5a19-0aaa-83b6-2d18-d1f9d23ae2a3.png)

4. 下記画面の赤枠ようにサイトバーが表示され、黄枠のように「practice」フォルダのファイル構成が表示されたことを確認する。
  ![VisualStudioCode_Live Server_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a47657f3-b5c2-2fdd-383f-4c0fcfe7e9e6.png)

5. 画面右下に「Go Live」が表示されるため、「Go Live」をクリックする。
  ![VisualStudioCode_Live Server_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/1cc358df-b891-789b-fea3-95d1dfcf6a9e.png)

6. ブラウザが起動し「Hello Live Server!」が表示される。Visual Studio Codeのエディタ画面には「index.html」が表示される。
  ![VisualStudioCode_Live Server_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ed0fc123-8cf4-d732-4610-dbdec55754d0.png)
  ![VisualStudioCode_Live Server_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ef69ed09-a8cf-4165-6be9-c93d76060998.png)

7. Visual Studio Codeの「index.html」に記載されている`Hello Live Server!`を`Hello World!`に変更する。
  ![VisualStudioCode_Live Server_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8bd6045f-3437-8fc6-d592-ed65f2133905.png)


8. 「index.html」の記載を修正に応じでリアルタイムでの表示が変化すればLive Serverが正常に動作している。  
※リアルタイムで変化しないときはLive Serverを再度起動させてみる。(Visual Studio Codeのエディタ画面で右クリック → 「Open with Live Server」)
  ![VisualStudioCode_Live Server_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3fb8b400-1ffb-8380-55a2-9a5f27da3acc.png)

# まとめ
- **Live Serverを使用する際は、HTMLファイルのみをVisual Studio Codeで開くのではなく、HTMLファイルが入っているフォルダごとVisual Studio Codeで読み込む必要がある**

# 余談
- 本件を解決するのに少し時間がかかり、あまりほかサイトでも説明されていなかったため早急に本記事を書いたため日本語や英語のスペルミス、わかりにくい文章があるかもしれません。