はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

VSCodeでWSL2のLinux上のファイルをリモート操作する

VSCodeでWSL2のLinux上のファイルをリモート操作する

Windows上にVSCodeがあればssh使わずとも WSL2上のLinuxにアクセスし操作ができる. これができると,例えば,WSL2上のLinuxにあるcコードをVSCodeで編集し gcc環境でコンパイルして結果を得ることが容易に可能になる.

参考: Windows Subsystem for Linux で VS Code の使用を開始する | Microsoft Docs

環境

  • Windows10 ver2004(OSビルド 19041.330)

WSL2を事前にインストール

WSL2を事前にインストールしておく. 以下にインストール用のメモがある.

cartman0.hatenablog.com

VSCode拡張機能をインストールする

VSCodeは事前にインストールしておく.

VSCode拡張機能「Remoto Development」をインストールする.

marketplace.visualstudio.com

Remoto Development

この拡張機能はpackなので以下3つが入る.

  • Remote - SSH
  • Remote - Containers: Docker用
  • Remote - WSL: WSL用

特にWSLと使うのは"Remote - WSL"だけだが, 仮想環境を利用するとどれも利用する機会があるので全部入れて問題ない.

拡張機能のインストールがうまくいくと, 左のメニューに"Remote Explorer"が追加され, 左下に緑色の接続マークが表示される.

Remote用のメニューが追加される

WSL2上のLinuxVSCodeを連携する

WSL2上のLinuxを起動して(Ubuntu.exeを起動するかcmd, powershellwslコマンド)ログインする. 現在のディレクトリか作業ディレクトリ上で以下のVSCodeのコマンドを実行.

> code .

すると連携用のVSCodeServerがDL,インストールされる.

VSCodeServerのインストール

無事インストールされるとVSCodeが立ち上がる. WSL上のLinuxと接続されていると左下にディストリビューションが表示される.

WSL2と接続

また,Explorercode .を実行したディレクトリをワークスペースとして登録される.

Explorerワークスペース

このワークスペース上であればファイルの追加・編集・削除が可能になる.

また,VSCodeを閉じてもWSL2上のLinuxが立ち上がったままであれば VSCodeをreopenすれば再接続される.

VSCodeから直接WSL2に接続する

上記の流れを1度行ってしまえば, WSL2を起動しなくともVSCodeから直接接続が可能になる,

  • 1. VSCodeを起動
  • 2. 左下の緑マークをクリックするか,ctrl+shiftのコマンドパレットで `> Remote-WSL`コマンドを使う
    • 例えば,> Remote-WSL: New Window using Distroを使えばWSL2上のDistributionを指定して新しいVSCodeを立ち上げる.
      > Remote-WSL: New Window using Distro
    • > Remote-WSL: Reopen Folder in WSLであれば現在のVSCodeが切り替わる.

WSL2上のディストリビューションと作業ディレクトリを切り替える場合, RemoteExplorerからreopenで切り替えることが可能. 緑のチェックマークが現在接続しているディレクトリになる.

ディストリビューションと作業ディレクトリを切り替える