Vagrant上のファイルをVScodeで編集 for Mac #VSCode

VagrantをプライベートネットワークでSSH接続してVSCode上でファイルを編集できるようにします。
Boxは自分で用意しといてください。今回はCentOS7.2で行います。

Vagrantのネットワーク設定

Vagrantfileを編集してIPを指定します。
今回はデフォルトをそのまま使います。

Vagrantfile

.
.
config.vm.network "private_network", ip: "192.168.33.10"
.
.

設定したらvagrant upで起動しといてください。

VSCodeプラグインのインストール

エディタの左側の拡張機能ボタン(またはShift + Command + X)からRemote VSCodeというプラグインをインストールします。

VSCode設定ファイルを編集

その後、Code > 基本設定 > 設定(またはCommand + ,)から設定ファイルに以下を追加します。

設定ファイル

{
    //-------- Remote VSCode configuration --------
    // Port number to use for connection.
    "remote.port": 52698,

    // Launch the server on start up.
    "remote.onstartup": true
}

VSCodeサーバー起動

F1キーを押して、「Remote: Start server」と検索してEnterでサーバーを起動します。
するとエディタ左下に「Starting server」と表示されます。

SSH接続

VSCode上で表示 > 統合ターミナル(またはControl + `)でターミナルを開きます。
そこで、

$ ssh -R 52698:127.0.0.1:52698 vagrant@192.168.33.10

でSSH接続できます。

rmateのインストール

接続したVagrant上にrmateをインストールします。

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

ファイル編集

あとはそのままSSH接続している状態のVagrant上で、編集したファイルを以下のコマンドでVSCodeで開くことができます。

$ rmate -p 52698 ファイル名