Visual Studio Codeで仮想マシン(VirtualBox)内のファイルを編集する

rmateを使用して、Vagrant(VirtualBox)で立ち上げた仮想マシン上にあるファイルの編集をVisutl Studio Code(以下VSCode)とで行う方法を紹介したいと思います。
以前はいくつか同じような記事があったのですが、なくなっていたので、備忘録として残します。
*全体的にキャプチャみにくくてすみません。

# 環境
## ホストOS: Windows10
VirtualBox: 6.0.8
Vagrant: 2.2.4
Visual Studio Code: 1.39.2

## ゲストOS: Ubuntu16.04
Vagrant box: bento/Ubuntu-16.04

# ホストOSの設定
## remoteのインストール
ホストOS上のVSCodeにremoteをインストールします。
VSCodeを起動した後、`Ctrl + p`を押して`ext install remote-vscode`と入力し、`Enter`を押します。
![rmote1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/4f59f7a6-191d-046b-04dd-fe9a74dc8923.png)

拡張機能の検索結果に、`Remote VSCode`が表示されるので、インストールを行います。
![rmote2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/e46d406f-5afd-dda6-1d04-6493a3cf28f0.png)


念のため、VSCodeを再度起動します。

## Remote VSCodeの設定
`File -> Preference -> Settings`からVSCodeの設定ファイルを開きます。
![rmote4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/c3e64a24-5a37-3a53-f5e2-5e0473b99198.png)

検索窓に`remote.onstartup`と入力または、左側のメニューから`Extensions -> Remote VScode configuration`を選択します。
`Remote:Onstartup`の`Launch the server on start up`にチェックを入れます。
![rmote5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/836ccce1-3cea-04e5-b9b5-08ef86bfbcd8.png)
(VSCodeのバージョンが古い方は、多分Jsonファイルを編集して、`remote.onstartup: false,`を`remote.onstartup: true,`に変更するとよいはずです。)

## sshトンネルの作成
仮想マシン上のファイルをVSCodeで編集する場合、普段行っている`vagrant ssh`や`ssh UserName@HostName`で接続するのではなく、sshトンネルを作成して接続します。
接続の際は、以下のコマンドを使用して接続を行います。
`ssh -R 52698:127.0.0.1:52698 UserName@HostName`

## alias(ショートカット)の作成
しかし、`ssh -R 52698:127.0.0.1:52698 UserName@HostName`を毎回打つのはめんどくさいので、aliasに設定します。
(Windowsの場合、正確にはalias風に設定することになります。)
私は、Linuxコマンドも一部使用できるPowerShellにaliasを設定しました。
(Linuxやコマンドプロンプトで設定したい場合は、お手数ですが、ネット上で調べてみたください。)

まずは、管理者権限でPowerShellを実行します。
以下のコマンドを実行します。
`Set-ExecutionPolicy RemoteSigned -Force`
![rmote6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/2c6e1ed5-90f8-a643-a622-5c4615c9c28c.png)

次に、PowerShellをユーザー権限で起動します。
(利用しているユーザーで普通にPowerShellを起動)
以下のコマンドを実行しファイルの作成とOpenを行います。
*既にprofileがある場合は、Openのみでよいと思います。

```
New-Item –type file –force $profile
notepad $profile
```
(`New-Item`でファイル作成、`notepad`でファイルを開く)
![rmote7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/f310d9f7-6f11-75e4-243e-a150b2be29bd.png)

すると、メモ帳が開きますので、aliasに設定したコマンドを記述します。
今回は、以下を記述

```
function sshr{
    ssh -R 52698:127.0.0.1:52698 vagrant@192.168.33.10
}
```
省略コマンド名`sshr`はお好みで。
`ユーザー名`と`ホストIP`はご自身の環境に合わせてください。
![rmote8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/f82ee73d-75b9-bbe6-6b49-eb9ae794aef1.png)

*`git`を`g`の様に、コマンド単体を省略する場合、`Set-Alias`を使用して`Set-Alias g git`と設定しますが、オプションを含める場合は`function`として設定を行います。

PowerShellを再起動し、エラーが出なければ問題ありません。
`sshr`を実行してみてください。
↓問題がない場合。
![rmote9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/b325bddd-c685-d2c8-8236-a743a25fa6d9.png)

↓エラー発生時
![rmote10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/2fccecaf-4671-35dc-849c-30f4ac9126e0.png)
エラーが出た場合は、焦らず先ほどの`notepad $profile`を実行し、修正してください。

# ゲストOSの設定
## rmateのダウンロード
[rmate(github)](https://github.com/aurora/rmate)
ゲストOS(Ubuntu16.04)にrmateのダウンロードと実行権限の付与を行います。

`vagrant ssh`や`sshr`、`ssh UserName@HostName`等でゲストOSにアクセスします。
ゲストOSのターミナルで以下のコマンドを実行します。

```
sudo wget -O /usr/local/bin/rmate https://raw.github.com/aurora/rmate/master/rmate
sudo chmod a+x /usr/local/bin/rmate
```

## aliasの設定
これで、`rmate -p 52698 [ファイル名]`を実行すると、ホストOS上のVSCodeが開きファイルの編集ができるのですが、sshと同様、毎回打ち込むのは面倒なので、aliasに設定します。

設定ファイルは、ゲストOSの~/.bashrcです。
viやnanoでファイルを開き、以下を追記します。
`alias code='rmate -p 52698'`
コマンド名の`code`はご自由に。

追記場所は`if~then`内とかでなければどこでもよいです。
aliasがまとまっている`# some more ls aliases`と書かれた場所があるので、私はそこに追記しました。
![rmote11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/02685e49-a9f7-2cbf-b319-97f2133419de.png)
*背景色の関係でnanoで編集しました。nanoでファイルを保存する場合は、`Ctrl + x` -> `y` -> `Enter`です。

sshrでゲストOSにアクセスした場合は、編集後、以下のコマンドを実行すると、codeコマンドが使えるようになります。

```
source ~/.bashrc
```

# 実際に使用してみる。
これで、以下の手順を踏むとVSCodeでファイルが編集できます。

1. ゲストOSを起動(ip: 192.168.33.10)
1. ホストOSでPowerShellを起動
1. sshrでゲストOSに接続
1. ゲストOS上で`code [ファイル名]`を実行

するとホストOSのVSCodeが起動し、ファイルの編集ができます。
![rmote12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/ef7eabd6-437b-8d5f-7d68-864e5d04ccb3.png)

VSCode起動画面
![rmote13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/4ba6535b-ae58-63a3-f5c2-475519769cec.png)
VSCodeで編集した内容は、保存するとゲストOS側でも反映されます。

VSCodeのTerminalと組み合わせると便利です。
![rmote14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135159/b2eec8e9-e733-f719-75c4-7ada4e5464e9.png)

以上です。
修正点や質問等ありましたらコメントお願いします。