Go to Qiita Advent Calendar Top
LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@shima202102(sima)

VS Codeワークスペースの開き方

Last updated at Posted at 2025-11-09

はじめに

本記事では、VS Code（Visual Studio Code）のワークスペースを開く方法を、以下環境毎にまとめてみました。

  • 1.ローカルPC（ローカルPCのワークスペースを開く）
  • 2.WSL（WSL2 Ubuntuのワークスペースを、ホストPCから開く）
  • 3.Docker（dockerコンテナ内のワークスペースを開く）
  • 4.リモートPC（リモートPCのワークスペースを開く）

VS Codeワークスペースとは?

VS Code（Visual Studio Code）のワークスペースとは以下です。

複数ファイル or フォルダをまとめて管理できる機能

Visual Studioの「ソリューション」と同じような機能です。

本記事では極力、Visual Studioのソリューションファイル（slnファイル）に相当する、code-workspaceファイルをダブルクリックするだけでワークスペースを開ける方法を紹介しました（1章,2章,4章）。

※3章（Docker）は、現時点でcode-workspaceの書き方が分かってないので、VS CodeのUI操作する方法となってます。

1. ローカルPC（ローカルPCのワークスペースを開く）

ローカルPC（下図pc1）内にある単一フォルダ（下図test_folder1）を、ワークスペースとして開く方法です。

fig_localpc_ws1.png

PC1内の適当なフォルダに、code-workspaceファイル（以下例）を作り、それをエクスプローラ上でダブルクリックするだけです。
folders.pathに、開きたいフォルダ（test_folder1）のパスを記述します。

test_ws1_localpc.code-workspace（ファイル名は任意。拡張子はcode-workspace。pc1（Windows）内のどこに置いてもOK）
{
  "folders": [
    {
      "path": "F:/work/vscode_ws/test_folder1"
    }
  ],
  "settings": {}
}

絶対パスなら、code-workspaceファイルがpc1内のどこにあっても開けます。相対パスの場合は、code-workspaceファイルがあるフォルダからの相対パスを記述します。パスのセパレータは、上記例では、Linux系でも使える「/」にしてます。Windowsの「\」（円マーク）を使う場合は、「\\」と２つ重ねて書く必要があります。

ワークスペースを開けました。ワークスペース名は、code-workspaceのファイル名になります。

snap_test_ws1_localpc.png

次に、ローカルPC（下図pc1）内にある複数フォルダ（下図test_folder1、test_folder2）を、ワークスペースとして開く方法です。

fig_localpc_ws2.png

PC1内の適当なフォルダにcode-workspaceファイルを作り、それをエクスプローラ上でダブルクリックするところは、上述の単一フォルダのときと同様です。
code-workspace内のfoldersにpathを複数記述するのが単一フォルダ時と異なる点になります。

test_ws2_localpc.code-workspace（PC1（Windows）内のどこに置いてもOK）
{
  "folders": [
    {
      "path": "F:/work/vscode_ws/test_folder1"
    },
    {
      "path": "F:/work/vscode_ws/test_folder2"
    },
  ],
  "settings": {}
}

こんな感じでワークスペースを開けます。
snap_test_ws2_localpc.png

2.WSL（WSL2 Ubuntuのワークスペースを、ホストPCから開く）

WSL2 Ubuntu（下図wsl2）内にある単一フォルダ（下図test_wsl_folder1）を、ローカルPC（下図pc1）のVS Codeで開く方法です。

fig_wsl2_ws1.png

これをやるには、

  • (a) WSL2 Ubuntuの起動＆VS Code接続
  • (b) WSL2 Ubuntu内のフォルダ（ワークスペース）を開く

という2つの処理を実行する必要があります。ただ、これらを自動実行できるVS Codeプラグイン(WSL（※）)があるので、これをインストールすれば、ローカルPCのときと同様、code-workspaceをエクスプローラ上からダブルクリックするだけでワークスペースを開くことができるようになります。

（※）Remote系プラグイン（Remote Explorer、Remote-SSH等）も必要かもしれません（筆者の環境にはインストール済）。

まずは、VS Codeプラグイン（WSL）のインストールです。手順は下図です。VS CodeのGUIでインストールできます。

snap_vscode拡張機能_wsl.png

次に、code-workspaceを以下作成します。

test_ws1_wsl2.code-workspace（pc1（Windows）内のどこに置いてもOK）
{
    "remoteAuthority": "wsl+Ubuntu-24.04",
    "folders": [
        {
            "uri": "vscode-remote://wsl+Ubuntu-24.04/home/simasaki/work/test_wsl_folder1"
        }
    ],
    "settings": {}
}

remoteAuthorityと、foldersのuriの設定がポイントです。設定方法は以下です。

"remoteAuthority": "wsl+[ubuntuバージョン]",
"uri": "vscode-remote://"wsl+[ubuntuバージョン]/[フォルダパス]"

上記例だと、

  • ubuntuバージョン＝ Ubuntu-24.04
  • フォルダパス＝ /home/simasaki/work/test_wsl_folder1

このcode-workspaceファイルを、エクスプローラ上でダブルクリックすることで、(a)(b)の処理が自動実行され、WSL2 Ubuntuのワークスペースを開けます。

snap_test_ws1_wsl2.png

WSL2 Ubuntu（下図wsl2）内にある複数フォルダ（下図test_wsl_folder1, test_wsl_folder2）を、ローカルPC（下図pc1）のVS Codeで開く方法です。

fig_wsl2_ws2.png

上述の単一フォルダのときとの違いは、code-workspaceの書き方だけです。
code-workspace内のfoldersにuriを複数記述します。

test_ws2_wsl2.code-workspace（pc1（Windows）内のどこに置いてもOK）
{
    "remoteAuthority": "wsl+Ubuntu-24.04",
    "folders": [
        {
            "uri": "vscode-remote://wsl+Ubuntu-24.04/home/simasaki/work/test_wsl_folder1"
        },
        {
            "uri": "vscode-remote://wsl+Ubuntu-24.04/home/simasaki/work/test_wsl_folder2"
        },
    ],
    "settings": {}
}

これを、エクスプローラ上でダブルクリックすれば、ワークスペースを開けます。

snap_test_ws2_wsl2.png

3.Docker（dockerコンテナ内のワークスペースを開く）

WSL2 Ubuntu（下図wsl2）で生成したdockerコンテナ（下図pytorch_gpu）内にある単一フォルダ（下図test_docker_folder1）を、ローカルPC（下図pc1）のVS Codeで開く方法です。

fig_docker_ws1.png

今回の例のdockerコンテナ（pytorch_gpu）は、以前投稿した以下記事で作成したものです。今回の記事用に新規コンテナを作成するのが面倒だったので使いまわししました。

これをやるには、以下処理の実行が必要です。

  • (a) WSL2 Ubuntuの起動＆VS Code接続
  • (b) dockerコンテナの起動
  • (c) VS Codeをdockerコンテナに接続
  • (d) dockerコンテナ内のフォルダを開く

上記「(d) VS Codeをdockerコンテナに接続」を実行するために、「Dev Containers」というVS Codeプラグインが必要です（※）。上記「(a) WSL2 Ubuntuの起動＆VS Code接続」は、2章のプラグインで実行できます。

（※）2章同様、Remote系プラグインも必要かもしれません。

VS Codeプラグイン（Dev Containers）は、2章の「WSL」プラグインのインストールと同様の手順で実行可能です（下図）。

snap_vscode拡張機能_dev_container.png

2章同様、code-workspaceの作成、といきたいところですが、残念ながら、dockerコンテナ内のワークスペースを開くためのcode-workspaceの書き方が分かっておりません。ChatGPTに聞くと、devcontainers.jsonやdocker_compose.yamlなど、docker初心者の筆者にはハードルが高そうな単語が次々出てきて、仕組みの理解が追い付きませんでした。

なので、VS CodeのGUI操作等で、上述（a）～（d）の処理を順次実施します。

(a) WSL2 Ubuntuの起動＆VS Code接続

2章のcode-workspaceを作成する方法でも実現できますが、これだけのためにファイルを１つ作成するのも煩わしいので、VS CodeのGUIから下図実施します。

snap_WSL2接続.png

(b) dockerコンテナの起動

WSL2 Ubuntuのターミナル上でdockerコンテナを起動します。ここは、VS Code特有の事項はなく、dockerコンテナに合わせた起動方法で問題ありません。

参考までに、今回のdockerコンテナの起動方法は以下です。
docker runコマンドを実行するシェルスクリプトdocker_run.sh（下記）で起動してます。

docker_run.sh
#!/bin/bash

# コンテナイメージ名。docker_build.shと合わせること
CONTAINER_IMAGE_NAME="cuda_ubuntu:12.4-24.04"
# コンテナ名。任意の名前でOK
CONTAINER_NAME=pytorch_gpu
# コンテナ内のホームディレクトリのマウント先。現在ディレクトリ直下に、/home/xxx/を作成
CONTAINER_HOMEDIR=$(pwd)/$HOME
# ホームディレクトリのマウント先となる空ディレクトリを、ホスト側（Ubuntu）に作成
if [ ! -d ${CONTAINER_HOMEDIR} ]; then
    mkdir -p ${CONTAINER_HOMEDIR}
fi

docker run -it --rm --gpus all \
            --name ${CONTAINER_NAME} \
            -u $(id -u):$(id -g) \
            --mount type=bind,source=/tmp/.X11-unix,target=/tmp/.X11-unix \
            --mount type=bind,source=/mnt/wslg,target=/mnt/wslg \
            --mount type=bind,source=${CONTAINER_HOMEDIR},target=${HOME} \
            --env CONTAINER_NAME=${CONTAINER_NAME} \
            --env DISPLAY=${DISPLAY} --env WAYLAND_DISPLAY=${WAYLAND_DISPLAY} \
            --env XDG_RUNTIME_DIR=${XDG_RUNTIME_DIR} \
            -w ${HOME} \
            ${CONTAINER_IMAGE_NAME} \
            /bin/bash
WSL2 Ubuntuターミナル
# docker起動
./docker_run.sh

(c) VS Codeをdockerコンテナに接続

下図方法で行います。WSL2接続とほぼ同様の手順です。接続先コンテナの選択（③）が増えているだけです。

snap_dockerコンテナ接続.png

(d) dockerコンテナ内のフォルダを開く

VS codeのメニューから「ファイル」→「フォルダーを開く..」でフォルダを選択します。
すると、下図のように、dockerコンテナ内のフォルダを開けます。

snap_test_ws1_docker.png

これは、単にフォルダを開いただけで、ワークスペースを開いたことにはなってないのですが、VS Codeでは、フォルダを開くだけで、フォルダ内の全ファイルや、サブフォルダも自動で取り込まれます。なので、ワークスペースと概ね同等の機能（複数ファイル or フォルダをまとめて管理する機能）が実現できており、大抵の開発はこれで困らないかと思われます。

残念ながら、現時点では、dockerコンテナ内のフォルダをワークスペースとして開く方法が分かってないので、1,2章のように、（別々の場所にある）複数フォルダをワークスペースとして開く方法はわかりません。わかったら、追記しようと思います。

4.リモートPC（リモートPCのワークスペースを開く）

リモートPC（下図remote_pc）のWSL2 Ubuntu（下図wsl2）内にある単一フォルダ（下図test_wsl_folder1）を、ローカルPC（下図local_pc）のVS Codeで開く方法です。

fig_remotepc_ws1.png

ローカルPCがMacになってますが、これはうちのPC事情でそうなっただけで、両方WindowsPCでも、本記事の内容はそのまま適用可能です。

また、接続先が、WSL2 Ubuntu内のフォルダになってますが、これは、WindowsのSSHサーバーを立ち上げるのがちょっと面倒だったのでこうしました。Windows上でSSHサーバーを立ち上げれば、本記事の方法で、Windows上のフォルダを接続先にすることも可能です。

本章の内容を実現するには、以下処理の実行が必要です。

  • (a) SSH環境構築（リモートPCでSSHサーバー起動、公開鍵/秘密鍵作成等）
  • (b) VS CodeをリモートPCに接続＆フォルダ（ワークスペース）を開く

(a) SSH環境構築（リモートPCでSSHサーバー起動、公開鍵/秘密鍵作成等）

VS Codeは、リモートPCへの接続にSSH（Secure Shell）を使用しています。なので、リモートPCにSSH接続ができるようにする環境を構築します。ここは、VS Codeに特化したものは特になく、一般的なSSH環境構築の内容になります。

ファイル配置は下図です。

fig_ssh関連ファイル配置.png

本記事の趣旨とはいささかずれる内容なので、手短にすませるために、実施内容だけ書き出し、解説は省略しました。以下記事に、解説含めて詳細に書きましたので、ぜひご覧ください。

WSL2設定

c:\Users\xx\.wslconfig (ネットワークをミラーモードに設定)
[wsl2]
networkingMode=mirrored
/etc/wsl.conf (systemd有効化)
[boot]
systemd=true
remote_pc（Windows）コマンドプロンプト or PowerShell
# WSL再起動
wsl --shutdown

SSHサーバー

/etc/ssh/sshd_config（※ポート設定、公開鍵有効化箇所のみ抜粋）
Port 20022
PubkeyAuthentication yes
remote_pcのWSL2 Ubuntuターミナル
# SSHサーバー(sshd)インストール
sudo apt install openssh-server

# SSHサーバー起動
sudo systemctl enable ssh
sudo systemctl start ssh

Windowsファイヤウォール設定（ポート開放）（remote_pc（Windows）上で実施）
fig_windowsファイヤウォール設定.png

公開鍵、秘密鍵作成

local_pcのターミナル(mac)
# /Users/xx/.sshフォルダで実行（.sshフォルダがない場合はmkdirで作る）
# 問い合わせはすべてReturn（入力なし）でOK

ssh-keygen -t ed25519

作成した公開鍵（id_ed25519.pub）を、remote_pcのWSL2 Ubuntuの/home/xx/.sshフォルダ（なければmkdirで作る）にコピーし、authorized_keysにリネーム or authorized_keysの末尾行に追加

config作成（接続先SSHサーバー情報を設定）

/Users/xx/.ssh/config (接続先SSHサーバー情報を設定)
Host desk-wsl-ubuntu
  HostName 192.168.0.5
  User simasaki
  Port 20022
  StrictHostKeyChecking no
  PasswordAuthentication no
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/id_ed25519
  IdentitiesOnly yes

(b) VS CodeをリモートPCに接続＆フォルダ（ワークスペース）を開く

これをやるには、「Remote-SSH」というVS Codeプラグインが必要になります。インストールは下図です。他のプラグインと同様の方法です。

snap_vscode拡張機能_remote.png

余談ですが、上図でわざわざ過去バージョン（v0.92.0）をインストールしているのは、うちのMac PCが古すぎて（Mac book pro mid2009）、最新バージョンをインストールしても動かなかったからです。普通は最新バージョンをインストールすれば問題ありません。ちなみに、VS Code本体も、同様の理由で、2023年リリースバージョンをインストールして動かしてます。

次に、code-workspaceを以下作成します。

test_ws1_remote.code-workspace（local_pc（Mac）内のどこに置いてもOK）
{
  "remoteAuthority": "ssh-remote+desk-wsl-ubuntu",
  "folders": [
    {
      "uri": "vscode-remote://ssh-remote+desk-wsl-ubuntu/home/simasaki/work/test_wsl_folder1"
    }
  ],
  "settings": {}
}

remoteAuthorityと、foldersのuriの設定方法は以下です。

"remoteAuthority": "ssh-remote+[リモートPC名]",
"uri": "vscode-remote://ssh-remote+[リモートPC名]/[フォルダパス]"

上記例だと、

  • リモートPC名＝ desk-wsl-ubuntu
  • フォルダパス＝ /home/simasaki/work/test_wsl_folder1

リモートPC名は、上述「(a)SSH環境構築」のconfig（/Users/xx/.ssh/config　※以下再掲）の「Host」行に記載した名前（下記例ではdesk-wsl-ubuntu）です。

/Users/xx/.ssh/config (※再掲)
Host desk-wsl-ubuntu
  HostName 192.168.0.5
  User simasaki
  Port 20022
  StrictHostKeyChecking no
  PasswordAuthentication no
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/id_ed25519
  IdentitiesOnly yes

このcode-workspaceファイルを、Finder（Macのエクスプローラ）上でダブルクリックすることで、(b)の処理が自動実行され、リモートPCのワークスペースを開けます。

snap_test_ws1_remotepc.png

ここでの実施内容は、2章のWSL2内のワークスペースを開く方法とほとんど同じで、接続先がwsl+[ubuntuバージョン] → ssh-remote+[リモートPC名]になっただけです。こういう共通化は、美しい仕様ですね。

なお、本節の方法は、local_pcがWindowsであっても適用可能です
（未確認ですが、Macに特化した処理がないので、適用可能なはずです）。

リモートPC（下図remote_pc）のWSL2 Ubuntu（下図wsl2）内にある複数フォルダ（下図test_wsl_folder1, test_wsl_folder2）を、ローカルPC（下図local_pc）のVS Codeで開く方法です。

fig_remotepc_ws2.png

ここも2章同様、上述の単一フォルダのときとの違いは、code-workspaceの書き方だけです。
code-workspace内のfoldersにuriを複数記述します。

test_ws2_remote.code-workspace（local_pc（Mac）内のどこに置いてもOK）
{
  "remoteAuthority": "ssh-remote+desk-wsl-ubuntu",
  "folders": [
    {
      "uri": "vscode-remote://ssh-remote+desk-wsl-ubuntu/home/simasaki/work/test_wsl_folder1"
    },
    {
      "uri": "vscode-remote://ssh-remote+desk-wsl-ubuntu/home/simasaki/work/test_wsl_folder2"
    },
  ],
  "settings": {}
}

これを、Finder（Macのエクスプローラ）上でダブルクリックすれば、ワークスペースを開けます。

snap_test_ws2_remotepc.png

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?