Visual Studio Code に Remote Development を 導入 しよう

目的

• Visual Studio CodeにRemote Developmentを導入する

実行環境

ローカルのOS

• Windows10
  接続先のOS
• Ubuntu18.04

この記事のターゲット

• Visual Studio CodeにRemote Developmentを導入したい方
• インストールはできるけどいまいち使い方が分からない方
• WSL環境Remote Developmentで開発作業をしたい方

Remote Developmentって？

• めっちゃ便利なプラグイン
• SSH接続を行い、リモートから接続先のマシンの中でVisual Studio Codeを起動することができる
• WSLの仮想Linuxにも接続することができる

SSH FSとの違い(筆者の主観も含む)

1. SSH FSは自分のPCで起動したVisual Studio CodeでSSH接続先のファイルを編集する
2. Remote DevelopmentはSSH接続先でVisual Studio Codeを起動しファイルを編集する。

実施概要

※下記の概要はすでにWSLのインストールが完了し、使用できることが前提です。
※まだWSLの環境が整っていない方はこちら※リンク先は準備中です。

1. Remote Developmentのインストール
2. SSHのconfigファイルの設定(リモートマシンに接続するときの設定WSLに接続するときは不要)
3. 接続テスト

実施詳細

1. Remote Developmentのインストール

2. こちらを参考にRemote Developmentの導入を行う

3. Remode Developmentと検索しインストールする際、インストール完了後に赤枠内も自動的にインストールされたことを確認する
   

4. SSHのconfigファイルの設定(リモートマシンに接続するときの設定WSLに接続するときは不要)

5. インストール後、下記画像のアイコンが現れるのでクリックする。
   

6. サイドバーに表示されたConfigureをクリックする。
   

7. 表示されたC:\Users\ユーザ名\.ssh\configをクリックする。
   

8. 下記画像のようにSSHのconfigファイルが開く
   

9. 接続に必要な情報を記入する。

   • Host alias →　aliasの部分を消して接続設定の名前を記入する。(任意のものでOK、わかりやすいものにしよう)
   • HostName hostname → hostnameの部分を消して接続先のIPアドレスを記入する。
   • User user → userの部分を消して接続先マシンのいずれかのユーザ名を入力する。
     

10. 接続テスト(WSL)

11. WSLを起動する

12. Visual Studio Codeの左下の角に存在する><をクリックする。
    

13. 出力されたメニューの一番上の「Remote-WSL:New Window」をクリックする。
    

14. セキュリティの警告が出るので「アクセスを許可する」をクリックする。
    

15. 「Remote-WSL:New Window」をクリックしたときに新しく起動した新しいウインドウの矢印部分をクリックする。
    

16. サイドバーに「WSL:Ubuntu-18.04に接続済み」と記載されていることを確認する。18.04はWSLのバージョンにより異なる。