VS Code使ってますか？
私はAtomを使ってみたりVS　Codeを使ってみたりと忙しい毎日です。
最近はAtomよりVS Codeのが拡張機能が充実しているのではないかと思い始めております。
大体は両方あるんですがね。

さて本題ですがVSCodeを使ってコーディングを行っている時ライブリロードは作業をする上では必須のようなものですよね。
node.jsとかでbrowser-syncとかでやってたりしておりました。
まぁ、いろいろとやり方はありますが、VSCode使ってするのが一番ラクなんじゃないかってことでそれの設定の方法をメモ！

Live Serverをインストール

VSCodeの拡張機能でLiveServerなるものがあるのでそいつを入れてみましょう。
VSCodeの左バーの部分に拡張機能

僕のでいうと上から６番目の□が４つあるボタンをおします。
[Ctrl or ⌘ + Shift + X]
検索窓に「Live Server」と入力しインストールをします。

これでインストールは完了

Live Serverを使ってみる

適当にVSCodeでプロジェクト開いてみましょう。

右下にある Go Live を推してみてください。
これでブラウザでページが開くはずです。

Live Serverの調整をしてみよう

ドキュメントルートの変更

プロジェクトのルートがドキュメントルートではない場合は少し調整が必要です。
セッティング方法は、プロジェクトのルートに[.vscode/setting.json]を作って下記を書けばドキュメントルートが変更されます。

{
  "liveServer.settings.root": "/public" // ドキュメントルートを指定
}

プロキシの設定

WPやアプリ開発などローカルでサーバーを構築したものを使いたい場合があると思います。
その場合はプロキシの設定をしてください。

{
  "liveServer.settings.proxy": {
    "enable": false,    // プロキシを使うかどうか
    "baseUri": "/",
    "proxyUri": "http://127.0.0.1:80"  //　URLを設定
  }
}

例えばDockerなんかを使った場合でlocalhost:9999でした場合は

{
  "liveServer.settings.proxy": {
    "enable": true,
    "baseUri": "/",
    "proxyUri": "http://localhost:9999"
  }
}

という具合です。
ただプロキシを設定した場合このままではライブリロードがされませんので

  "liveServer.settings.useWebExt": true

こちらを追加してください。

iPhoneなど実機で表示させたい場合は
Mac等のIPが必要になってきます。
いちいち調べるのは面倒なので

  "liveServer.settings.useLocalIp": true

こいつを追加してもらうとブラウザで開いたときに127.0.0.1:5500ではなく
「http://192.168.245.238:5500/」というようにローカルのIPで開くようになりますので
実機でこのアドレスを開いてみてください
そうすれば、開くはずです。
ファイアウォールが引っかかって開かない場合があると思うので、ポート番号を開放してから再度試してください。

ざっと、Live Serverの使い方を書きましたが、いかがでしたか？
エディタでできるなら、やっちゃえっていうね。
そうすれば管理も楽になるかと思います。
あとはコンパイル等ができればwebpackとかgulpなどは使わなくてもよくなるかなと思います。
そうすればいろいろプロジェクトごとにぶっこまなくてもよくなるかと
共同開発をしてる場合は環境を揃えるために必要な場合もあるかなと思いますが、
setting.jsonを共有しておけばなんとかなるかなって思います。

それでは良きVScodeライフを！