VS CodeをインストールしてWSLにつなぐ

VS Codeは、コードを書くための画面(エディタ)です。Windows側にインストールし、「WSL」拡張機能でUbuntuにつなぎます。つなぐと、画面はWindowsにありながら、ファイルの編集やターミナルはWSL側で動きます。

手順1: VS Codeをインストールする

すでに入っている場合は、手順2へ進みます。

VS Codeの公式サイトからインストーラーをダウンロードして実行します。インストーラーの途中にある「追加タスクの選択」では、「PATHへの追加」にチェック が入っていることを確認します。これで、ターミナルから code コマンドが使えるようになります。

PowerShellで、WinGetを使って入れることもできます。

winget install Microsoft.VisualStudioCode

手順2: WSL拡張機能を入れる

1. VS Codeを開きます。
2. Ctrl + Shift + X で拡張機能の画面を開きます。
3. 「WSL」と検索し、発行元が Microsoft のものを インストール します。

PowerShellから入れる場合は、次のコマンドです。

code --install-extension ms-vscode-remote.remote-wsl

手順3: WSLのフォルダをVS Codeで開く

Ubuntuのターミナルで、プロジェクトを置くフォルダへ移動し、code . を実行します。

cd ~/projects
code .

初回は、WSLの中に「VS Code Server」という部品が自動でインストールされるため、少し時間がかかります。

しばらくするとVS Codeが開きます。左下の緑色の部分に「WSL: Ubuntu」と表示されていれば、WSLにつながっています。

ほかの接続のしかた

VS Codeを先に開いてから、つなぐこともできます。F1 キー(または Ctrl + Shift + P)でコマンドパレットを開き、次の中から選びます。

コマンド	内容
WSL: Connect to WSL	標準のLinuxにつなぐ
WSL: Connect to WSL using Distro	Linuxの種類を指定してつなぐ
WSL: Reopen Folder in WSL	いま開いているフォルダを、WSLで開き直す
WSL: Reopen in Windows	WSLからWindows側に戻す

拡張機能は「どちら側」に入れるか

WSLにつないだVS Codeでは、拡張機能が WSL側 に入ることがあります。つないだ状態で拡張機能を探すと、「WSL: Ubuntu にインストール」のようなボタンが表示される場合は、そちらを押します。見た目に関わる拡張機能(テーマなど)は、Windows側に入ります。

確認する

• Ubuntuで code . を実行すると、VS Codeが開く
• 左下に「WSL: Ubuntu」と表示される
• VS Code内のターミナルで pwd を実行すると、/home/ユーザー名/... と表示される(C:\ ではない)

うまくいかないとき

• code: command not found と表示される: VS Codeのインストール時に「PATHへの追加」を入れていない可能性があります。VS Codeを入れ直すか、「困ったときは」のページを確認してください。Ubuntuのターミナルを開き直すことも試してください。
• 左下が「WSL: Ubuntu」にならない: コマンドパレットから WSL: Reopen Folder in WSL を実行してください。

参考

• VS Code Remote - WSL(公式)