Zenn
🖋

Windows上のVS CodeでRemote-WSLを使い。WSL2のUbuntu 20.04へアクセスする。

2022/02/14に公開
Docker
VS Code
Ubuntu
Windows
tech

はじめに

https://zenn.dev/s_ryuuki/articles/46c6d9d8d34404
↑作成した環境へVisual Studio CodeのRemote-WSLプラグインを使用してアクセスする。

環境

  • Visual Studio Code 1.64.2 [1]
    • Remote- SSH v0.70.0
    • Japanese Language Pack for Visual Studio Code

Remote-WSL

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl
VS Code上からWSL2のUbuntuへ接続するためのプラグイン。

プラグインのインストール

  1. 拡張機能を選択する
  2. 検索ボックスへ「REMOTE WSL」と入力する


3. 「Remote - WSL」をクリックする
4. 「インストール」ボタンを押す

WSL2のUbuntu 20.04へ接続

  1. リモートエクスプローラーを選択する
  2. 「Ubuntu-20.04」を右クリックする（接続メニューが表示される）


「Connect to WSL」を選択する。
新規でVS Codeが起動する。


左下に「WSL: Ubuntu-20.04」と表示されていれば接続できてます。

WSL2のUbuntu 20.04から切断

  1. 左下の「Connect to WSL」をクリックする
  2. メニューから「リモート接続を終了する」をクリックする

使い方

基本ローカルでVS Codeを使うときと同じように使える。

接続先の設定

WSL2のUbuntu 20.04に「~/.vscode-server」というフォルダーが作成される。
「~/.vscode-server」下に、設定ファイル作成やプラグインがインストールされる。

ターミナル

Macのターミナルを起動せずにVS CodeからUbuntuにアクセスする。


メニューの「ターミナル」→「新しいターミナル」をクリックする。


VS Code上にターミナルが開く。
WSL2にログインせずともVS Code上からシェルが使用できる。

Ubuntu 20.04内のフォルダーを開く

  1. エクスプローラーを選択する
  2. フォルダーを開くをクリックする


「ファイルまたはフォルダーを開く」のlocalstack-0.13.0をクリックする。


「OK」ボタンを押す。


「はい、作成者を信頼します　フォルダーを信頼してすべての機能を有効にする」ボタンを押す。[2]


通常使用時と同じようにファイルリストが表示される。
README.mdをクリックするとファイルの内容が表示される。

dockerプラグイン

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker
dockerの操作をVS Code上から行えるようにする。

  1. 拡張機能の検索窓に「docker」と入力する
  2. dockerプラグイン横の「インストール」ボタンを押す。


サイドバーにdockerアイコンが追加される。


実行されているdocker情報が表示される。[3]
また、イメージ内の情報が参照できる。


実行中のdockerを右クリックするとメニューが表示される。
各種機能を実行できる。

参考にしたサイト

脚注

  1. キャプチャ画像はPortableモードで撮影 ↩︎

  2. 初回のみ表示される ↩︎

  3. Ubuntu上でdockerデーモンが動いていないと表示されない ↩︎

Discussion