VagrantでVScodeのRemote Developmentを使おう！

はじめに

最近LaravelのでVagrantを用いたHomestead環境で作業をしており,remoteの作業環境としてVScode拡張機能のSSH FSを使用していました(この記事).

上記記事を投稿したところ,VScodeではもうremote developmentが使えるよ！と教えていただいたので,使ってみたいと思います.

実行環境

• macOS Mojave v10.14.5
• VScode v1.36.1

クソ簡単

とりあえずVagrantを動かすディレクトリに移動します.
その後,vagrantでssh接続する際の設定をみてみます.

cd Homestead
vagrant ssh-config

上記コマンドのように,vagrantが動くところに行ってvagrant ssh-config,というイメージで大丈夫です.

すると以下のようにvagrantでssh接続する際の設定が吐き出されます.

Host homestead
  HostName 127.0.0.1
  User vagrant
  Port [port.No]
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/[username]/Homestead/.vagrant/machines/homestead/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  ForwardAgent yes

vagrantならすでにリモート側にssh接続をする準備が整っているので,ホストのssh接続に関するconfigに設定を書き込んでおきます.

以下のコマンドを実行してください.
vagrant ssh-configで出力される結果を~/.ssh/configに書き込みます.

vagrant ssh-config >> ~/.ssh/config

設定は以上だけで終わりです！

あとはVScode(アップデートはしておいてください)で拡張機能の"Remote Development"を検索してください.

Remote Developmentをインストールしたら,画面左下に表示される><のようなマークをクリック,"Remote-SSH: Connect to Host"を選択して先ほど設定したリモートサーバの名前を選択します.

以上で接続終了です！

ローカルに入っている拡張機能はリモート側では導入されていないことがありますので,必要な拡張機能をインストールしてカスタマイズしていきましょう.

まとめ

設定ファイルの記述がコマンド一発なのはCHO-RAKUですね.
各種intellisenseやemmet, git lensなどの拡張機能も使えてかなり開発が捗りそうです.
VScode, 最強！！