Visual Studio Code (VS Code) のインストール

VS Code を WSL 拡張機能と併用することで、WSL をフルカスタマイズできる開発環境として VS Code から直接使用できます。

以下の手順に従って、Windows に VS Code をインストールし、拡張機能を追加します。

以下のことを便利に行えます。
- Linux ベースの環境で開発する
- Linux ツールチェーンとユーティリティの使用
- Outlook や Office などのツールへのアクセスは維持しながら、Linux アプリケーションの実行とデバッグ
- VS Code のターミナルで Linux ディストリビューションを実行
- VS Code の Intellisense コード補完、リンティング、デバッグサポート、コードスニペット、ユニットテスト機能を利用する
- VS Code の Git サポートにより、バージョン管理を行う
- WSL プロジェクトでコマンドや拡張機能を実行
- OS 間の課題を気にせずファイルを編集

VS Code と拡張機能をインストール

VS Code のインストールページからインストーラーを選択し、Windows にインストールします。
- インストール中に [PATH への追加] オプションをオンにします。
操作画面イメージ
Japanese Language Pack for Visual Studio Code をインストールします。

操作画面イメージ

注意: この画像は旧版の撮影で、英語 UI や古いバージョンの画面です。

この拡張機能パックには、WSL、Dev Containers、Remote - SSH 拡張機能が含まれています。

No 拡張機能名機能

1 WSL 拡張機能 VS Code で WSL 上の Linux プロジェクトを開くことができます。(パスの問題、バイナリの互換性、またはその他の OS 間の課題について心配する必要はありません)

2 Dev Containers 拡張機能コンテナー内のプロジェクトフォルダーやリポジトリを開くことができます。これにより、VS Code のすべての機能セットを利用して、コンテナー内で開発作業を行うことができます。

3 Remote - SSH 拡張機能 SSH でリモートマシンに接続し、そのマシン上で VS Code を使用して開発作業を行うことができます。

No	拡張機能名	機能
1	WSL 拡張機能	VS Code で WSL 上の Linux プロジェクトを開くことができます。(パスの問題、バイナリの互換性、またはその他の OS 間の課題について心配する必要はありません)
2	Dev Containers 拡張機能	コンテナー内のプロジェクトフォルダーやリポジトリを開くことができます。これにより、VS Code のすべての機能セットを利用して、コンテナー内で開発作業を行うことができます。
3	Remote - SSH 拡張機能	SSH でリモートマシンに接続し、そのマシン上で VS Code を使用して開発作業を行うことができます。

操作画面イメージ

重要: WSL 拡張機能をインストールするには、VS Code のバージョン 1.35 以降が必要です。オートコンプリート、デバッグ、リンティングなどのサポートが失われるため、WSL 拡張機能なしで WSL を使用することはお勧めしません。

wslc を Dev Containers のドライバーとして使用する

GA リリースにより、wslc を VS Code の Dev Containers の既定ドライバーとして使用できるようになりました。公式ブログでは次のように案内されています。

“VS Code dev container support: Use wslc as your default driver for creating and interacting with VS Code dev containers”

これにより、Docker Engine や Docker Desktop を導入していなくても、VS Code の Dev Containers 機能をそのまま利用できます。

設定手順
1. Dev Containers 拡張機能を最新版に更新します。wslc に対応していない古いバージョン (例: 0.417.0) では、以下の設定をしても動作しません (0.469.0 で動作を確認しています)。[拡張機能] ビューで Dev Containers を選択し、更新が表示されていれば更新してください。
2. 設定 (Ctrl + ,) を開き、dev.containers.dockerPath を検索して、値を wslc に変更します。設定画面の説明文は「Docker (または Podman または WSLc) 実行可能ファイルの名前またはパス。」です。
  
  操作画面イメージ
注意: この設定を行わないと、次のステップで「コンテナーで再度開く」を実行したときに「開発コンテナーでは、Docker を実行する必要があります。WSL に Docker をインストールしますか?」と表示されます。

注意: wslc ドライバーは、VS Code を Windows 側 (ローカル) で開いているときに使用します。WSL のウィンドウ ([WSL: Ubuntu-26.04]) では Dev Containers の CLI が WSL の中で実行されるため、wslc が見つからず動作しません。そのため次のステップでは、プロジェクトを Windows 側のフォルダーに置いて開きます。

INFO: あわせて VS Code container extension も wslc をサポートしています。コンテナーの管理を GUI で行いたい場合に便利です。
VS Code で WSL プロジェクトを開く

WSL ディストリビューション内のプロジェクトを開くには、次のいずれかの方法を使用します。
- コマンドラインから
  
  お使いの WSL ディストリビューションからプロジェクトを開くには、そのディストリビューションのコマンドラインを開いて、「code .」と入力します。
  
  Open WSL project with VS Code remote server
- VS Code から
  
  VS Code でショートカット CTRL+SHIFT+P を使用してコマンドパレットを起動することで、より多くの VS Code の WSL オプションにアクセスすることもできます。その後「WSL」と入力すると、利用できるオプションの一覧が表示されます。
  
  VS Code's command palette
WSL に接続すると、VS Code の左下隅のリモートインジケーターに WSL: Ubuntu-26.04 と表示されます。

VS Code の WSL リモートインジケーター
VS Code WSL 内の拡張機能

WSL 拡張機能によって、VS Code が “クライアントサーバー” アーキテクチャに分割され、クライアント (ユーザーインターフェイス) はご利用の Windows コンピューター上で実行され、サーバー (ご利用のコード、Git、プラグインなど) は WSL ディストリビューション内で “リモート” で実行されます。

WSL 拡張機能の実行中に [拡張機能] タブで、ローカルと WSL の拡張機能を確認できます。ローカル拡張機能 (例えば、テーマ) は一度のインストールで済みますが、Python 拡張機能など一部の拡張機能は各 WSL ディストリビューションに個別にインストールする必要があります。未インストールの拡張機能には警告アイコン ⚠ と [WSL でインストール] ボタンが表示されます。

VS Code with WSL extensions vs local extensions

注意: この画像は旧版の撮影で、WSL: UBUNTU-22.04 と表示されています。本ハンズオンでは Ubuntu-26.04 と読み替えてください。

詳細は VS Code ドキュメントを参照してください。
- WSL で VS Code を起動すると、シェルスタートアップスクリプトは実行されません。詳細は高度な環境のセットアップスクリプトを参照してください。
- WSL コマンドラインから VS Code を起動する際の問題については、トラブルシューティングガイドを参照してください。