Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 ファイル名
daiki7nohe
RubyとかAngular、React書いてます。 クラウド使ってできるだけ楽をしたい。
fusic
個性をかき集めて、驚きの角度から世の中をアップデートしつづける。
https://fusic.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away