VS CodeからWSLのプロジェクトを開こう
更新日：2026-08-02
前の記事では、Ubuntuのターミナルでファイルとディレクトリを操作しました。今回は、WSL上のプロジェクトをVS Codeで開き、編集とコマンド実行を一つの画面で行えるようにします。
今回使用するファイル構成
sandbox/
└── wsl-vscode-practice/
└── index.html
このプロジェクトは、WindowsのC:ドライブではなく、WSLのホームディレクトリ以下へ作成します。
VS CodeとWSL拡張機能を準備する
WindowsへVS Codeをインストールする
VS Code本体はWindows側へインストールします。すでにHTML・CSS学習で利用している場合は、そのまま使用できます。
WSL拡張機能をインストールする
VS Codeの拡張機能画面で「WSL」を検索し、Microsoftが提供するWSL拡張機能をインストールします。
この拡張機能により、画面はWindows上のVS Codeを使いながら、ファイル操作、ターミナル、拡張機能の実行環境をWSL側へ接続できます。
WSL側にプロジェクトを作る
Ubuntuのターミナルで実行します。
mkdir -p ~/sandbox/wsl-vscode-practice
cd ~/sandbox/wsl-vscode-practice
touch index.html
現在位置を確認します。
pwd
次のように/homeから始まるパスならWSL側です。
/home/webstudent/sandbox/wsl-vscode-practiceのように/homeから始まるパスならWSL側です。
VS Codeで現在のディレクトリを開く
Ubuntuのターミナルで実行します。
code .
.は現在のディレクトリを表します。初回はVS Code Serverの準備に時間がかかる場合があります。
VS Codeが開いたら、画面左下に「WSL: Ubuntu」などの接続表示があることを確認します。
HTMLを編集する
index.htmlへ次の内容を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WSLとVS Code</title>
</head>
<body>
<h1>WSL上のファイルを編集しています</h1>
</body>
</html>
保存した後、VS Code内のターミナルを開きます。
pwd
ls -la
先ほどと同じWSL上のプロジェクトが表示されることを確認します。
ファイルを置く場所を理解する
WSLからWindowsのC:ドライブは、通常/mnt/c以下に見えます。
Windowsのユーザーディレクトリは、WSLから/mnt/c/Users/Windowsのユーザー名/として参照できます。
一方、WSLのホームは次の場所です。
WSLのホームディレクトリは/home/Linuxのユーザー名/です。
Dockerを使うプロジェクトは、基本的にWSLのホーム以下へ置きます。Linux側のツールが多数のファイルを読み書きする場合、WSLのファイルシステム内に置いたほうが、権限や性能の問題を避けやすくなります。
WindowsのエクスプローラーからWSLのファイルを見る場合は、アドレス欄へ次を入力できます。
たとえば\\wsl$\Ubuntu\home\webstudent\sandboxと入力します。表示名とユーザー名は、自分の環境に合わせます。
拡張機能の実行場所を確認する
VS Codeの拡張機能には、Windows側で動くものとWSL側へインストールするものがあります。
WSL接続中に拡張機能画面を開くと、「WSL: Ubuntuにインストール」と表示される場合があります。PHPの解析やLinux上のツールと連携する拡張機能は、WSL側へインストールします。
ターミナルを取り違えない
VS Codeのターミナル右上に、bash、Ubuntu (WSL)、PowerShellなどの表示があります。
uname -a
pwd
Linuxの情報と/home以下のパスが表示されれば、WSLのターミナルです。Docker Composeの操作は、今後このWSLターミナルから行います。
うまく開けないときの確認点
codeコマンドが見つからない
VS CodeとWSL拡張機能を確認し、WindowsとWSLを再起動します。VS Codeのコマンドパレットから「WSL: Connect to WSL」を選ぶ方法もあります。
画面左下にWSLと表示されない
Windows側のフォルダを通常のVS Codeで開いている可能性があります。Ubuntuのターミナルで対象ディレクトリへ移動し、code .を実行します。
ファイルを編集できない
ls -laで所有者を確認します。sudoでプロジェクトを作ると、通常ユーザーが編集できない所有者になる場合があります。ホーム以下の開発ファイルは、通常ユーザーで作成します。
まとめ
- VS Code本体はWindows側、プロジェクトはWSL側へ置く
- WSL拡張機能を使うと、VS CodeからUbuntuのファイルとターミナルを操作できる
- Ubuntuでプロジェクトへ移動し、
code .で開く - 画面左下の接続表示と
pwdで実行環境を確認する - Dockerを使うプロジェクトはWSLのホーム以下へ置く
次の記事では、Gitをインストールし、Git BashとWSLのUbuntuの違いを確認します。