VisualStudioCodeからvagrantのVMに接続、編集

概要

  • VSCodeからvagrant,virtualbox上のソースを編集したい

  • まとめると

    • RemoteVSCodeというプラグインでVSCodeにリモートの設定をしてVMにssh接続

Vagrantの準備

  • vagrant をホストオンリー接続できるようにしておく

VSCodeの準備

  • 1.Remote VSCode を拡張機能としてインストール
  • 2.Command + , で User Settings を編集

    • 下記を{}の中に追加s
    • 1
      2
      3
      4
      5
      6
      //-------- Remote VSCode configuration --------
      // Port number to use for connection.
      "remote.port": 52698,

      // Launch the server on start up.
      "remote.onstartup": true
  • 3.F1キーを押す(macの場合、fn + F1)

    • 「Remote: Start server」を入力してサーバを起動
    • 左下に「Sarting serber」と表示される

ubuntuでの設定

  • 1.VSCodeのターミナルからssh接続

    • 1
      $ ssh -R 52698:127.0.0.1:52698 vagrant@192.168.33.10
  • 上記のコマンドの意味

    • $ ssh (SSH サーバのアドレス) -R (ローカルで待ち受けてるポート):(SSH サーバのアドレス):(SSH サーバで待ち受けるポート番号)
  • 2.rmateのインストール

    • 接続をリダイレクト先まで追い(L)、データを指定したパスに保存する(o)コマンド
    • すぐrmateコマンドを使えるようにPATHの通っているディレクトリを指定する
    • 1
      2
      3
      sudo curl -Lo /usr/local/bin/rmate https://raw.githubusercontent.com/textmate/rmate/master/bin/rmate

      sudo chmod a+x /usr/local/bin/rmate

rmateを使用して編集

  • 確認用にテキストファイルを作成

    • 1
      vi text.txt
  • 何か入力する

  • rmateでファイルを指定してVSCodeで開く

    • 1
      rmate test.txt
  • テキスト編集、保存

  • VM側でテキストを開いてみると編集内容が反映されている

参考