Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Organization

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

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 ファイル名
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
17
Help us understand the problem. What are the problem?