背景
Visual Studio Code (VS Code) は、その拡張機能である Remote Development を使うことで、WSL2 内で動作するアプリケーションをシームレスに編集・デバッグできます。Windows上のVS CodeからWSL2のファイルシステムにアクセスし、ローカルと同じように作業できるのが特徴です。本記事では、VS Code Remote - WSL の導入手順と基本的な使い方、さらに快適に利用するためのコツを紹介します。
手順
- 必要なソフトウェアのインストール
WSL2環境に加えて、Windows側にVS Codeをインストールしておきます。そして、VS Codeの拡張機能マーケットプレイスから「Remote Development」を検索してインストールします。この拡張には Remote - WSL、Remote - SSH、Remote - Containers などが含まれていますが、WSL2で利用するのは Remote - WSL です。 - WSL2ディストリビューションの選択
拡張機能をインストールした後、VS Codeの左下にある緑色の「><」アイコンをクリックし、「WSL として新しいウィンドウを開く」を選択します。利用可能なディストリビューションの一覧が表示されるので、目的のUbuntu等を選びます。新しいウィンドウが開き、そこからはWSL2内のファイルシステムがルートとして扱われます。 - プロジェクトのオープンと依存関係の管理
VS Code内から~/projects/myapp - デバッグ設定の調整 VS Codeのデバッグ機能を活用する際は、launch.json で “useWSL”: true を指定して、デバッガーがWSL2上で実行されるようにします。Python用の構成テンプレートは拡張が自動生成してくれますが、Node.jsやGoなど他言語の場合は “runtimeExecutable”: “/usr/bin/node” や “/usr/bin/go” のようにWSL内の実行ファイルパスを指定します。また、環境変数の設定やポートフォワーディングが必要な場合は、“env” や “port” の項目を追加して調整します。
- パフォーマンスと快適性のためのTips WSL2とVS Codeを使用する際のパフォーマンスを最大化するためには、プロジェクトファイルを必ずWSL側のファイルシステム（例えば /home//projects 内）に置き、Windows側のNTFS領域と跨いだI/Oを避けることが重要です。大規模なリポジトリや node_modules が多いプロジェクトでは特に効果があります。VS Codeの自動保存設定を「ファイルがフォーカスを失ったとき」に変更したり、不要な拡張機能を無効化することで、エディタの反応速度を維持できます。また、WSL2はデフォルトで一定量のメモリとCPUを消費するため、.wslconfig でリソース制限を設定し、ホストOSとのバランスを取ることも検討しましょう。 まとめ VS Code Remote Development を使えば、WindowsとLinuxの境界を意識することなく統一された開発環境を構築できます。適切な拡張機能をインストールし、ディストリビューションを選び、プロジェクトをWSL2側に配置するだけで、Docker コンテナや Python、Node.js などの開発ワークフローをスムーズにこなせます。デバッグ設定やパフォーマンスの最適化を行うことで、より快適な開発体験が得られるでしょう。WSL2 と VS Code の連携を活かして、生産性の高い開発環境を手に入れてください。 などのディレクトリを開きます。初回は拡張機能が自動的にWSL2内にサーバーコンポーネントをインストールします。ターミナルもWSL2環境に切り替わり、
pythonやnpmなどの依存関係が直接動作します。必要な拡張（例えばPython、ESLintなど）もWSL側にインストールするよう促されるので、開発に必要なものを追加します。 - デバッグ設定の作成
アプリケーションのデバッグを行うには、.vscode/launch.jsonを作成して構成を記述します。例えば Python の場合は、"program": "${file}","console": "integratedTerminal"などを指定します。Node.js や Go の場合も対応するデバッグタイプを選べば、ブレークポイントの設定やステップ実行が可能になります。
