VSCode で編集すれば仮想マシン中で動作する Web サーバでも Live Reload できるよという話

Vagrant を使うと VirtualBox で VM を立ち上げてホスト OS との間で共有フォルダの設定をするのも簡単でいいですよね.
ただ、ホストから共有フォルダ中のファイルを編集しても、VM 中で動いている Web サーバ (webpack-dev-server など) はファイルの更新を認識してくれなくて Live Reload できないのは難点だったりします.

でも、VSCode を使っているなら実は割と簡単に VSCode 上での編集を Live Reload で反映できます.

VSCode を開き、Extensions から Remote Development という拡張をインストールしてください.
この拡張は VSCode から SSH でサーバに接続し、そのサーバ上のファイルを VSCode 上で編集できるようにしてくれるという拡張です.
この拡張がインストールされると、VSCode のウィンドウの一番左下 (歯車マークの Manage の下) に ≶ というアイコンが表示されるようになります.

あとは、VSCode から VM に対して SSH で接続するための鍵情報が用意できれば OK です.
Vagrant を使っている場合、シェル上で以下のようにして鍵情報を用意することができます.

$ vagrant ssh-config --host "Vagrant の VM 名" >> ~/.ssh/config

これにより、以下のような内容の SSH の鍵情報が ~/.ssh/config へと追記されることになります.

Host Vagrant の VM名
  HostName 127.0.0.1
  User vagrant
  Port 2200
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /path/to/vagrant/folder/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL

VSCode に戻って ≶ のアイコンをクリックしてみましょう.
コマンドパレットが現れるので、その中から Remote-SSH: Connect to Host... をクリックしましょう.
すると、先程追記した ~/.ssh/config の内容が自動的に読み取られ、コマンドパレットの一覧中に "Vagrant の VM 名" が表示されると思います.
これをクリックすると新たに VSCode のウィンドウが現れます.

この新たに表示された VSCode ウィンドウ上では選択した VM 中に既に SSH で接続されている状態となっており、Open や Open Folder をクリックするとホストのディレクトリツリーではなく VM のディレクトリツリーが表示されることになります.

あとはここから編集したいプロジェクトのディレクトリを開き、普段 VSCode を使う際と全く同じように編集して上書きすれば、VM 中で動作するサーバによってファイルの更新が検出されて Live Reload がうまく動くはずです.

VSCode 便利ですね.