vagrantのファイルをVSCodeで編集 (Remote Development with VScode)

2019年5月初めごろにVScodeの公式機能でリモート環境の開発の拡張機能が公開されました。 https://code.visualstudio.com/blogs/2019/05/02/remote-development

現在はVScode Insider版でのみ利用でき、以下より入手できます。
https://code.visualstudio.com/insiders/

これまでは拡張機能の「Remote Workspace」を利用して似たようなことができましたが、Go to Fileなどの検索機能がうまく働かなかったり、そのほか言語補間などの機能もローカルにサーバ上と同じ環境を構築しないと利用できないなど不便でした。

本機能はリモートサーバ上に拡張機能をインストールするため、「Project maneger」などの拡張機能も利用することができます。vagrantでの開発がすごく捗りそうです。

ざっくり手順を説明します。Insider版をインストールし、Remote Development拡張機能をインストールします。 ctrl+shit+pでコマンドパレットを出し、Remote-SSH: Connect to Hostを選択、 ホスト名が表示されていれば、設定ファイルが読み込まれているので、選択してssh接続が実施できます。 Configure SSH Hosts...のみしか表示されない場合、設定ファイルを作成しましょう。

vagrant ssh-config --host myhost >> ~/.ssh/config で設定ファイルを作成します。
私の環境では以下が出力されました。

Host myhost
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/vagrant/centos7/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL

（注意：　最初は上記configファイルをVScodeが読み込んでくれなかったです。BOM(byte order mark)が付与されていた？らしくプログラムが実行できないらしいです。VScodeでファイルを開いて上記内容を保存したら問題なくなりました）

ssh接続できたらVScodeのウィンドウの左下にSSH: myhostと表示されます。 後は、このウィンドウで拡張機能をインストールすると、vagrant上のディレクトリに入ります。

すごくいいですね。これまではローカル環境でコーディングして、ファイル共有（rsync)でvagrant上にアップするやり方 をしていましたがrsync-autoで自動同期とかすると、vagrant上で生成されたファイルが消えてしまうことがよくあり、rsync-autoを停止して、rsync-backでゲストとホストを同期して再度rsync-autoするなど、結構面倒なことをしてました。

Remote Developmentは直接サーバ上のファイルを編集するので、ファイル共有やめてlinux環境のみで完結できるので 快適になりそうです。

なお、sshの詳しい説明は以下の公式サイトが参考になります。 https://code.visualstudio.com/docs/remote/ssh