Posted at

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

More than 1 year has passed since last update.

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 ファイル名