本記事では、Windows Subsystem for Linux 2 (WSL2)環境で、Visual Studio Code (VS Code)を使って開発する方法を紹介します。
VS Code本体とWSL拡張機能のインストール方法から、WSL上での具体的な使い方まで解説しますので、ぜひ参考にしてください。
※WSLの全体像や基本設定を確認したい方は、WSL完全ガイドを先にご覧ください。
WSL環境でVS Codeを使うメリット
WSLでVS Codeを使う最大の理由は、その優れた連携機能にあります。
- ファイルパーミッションのトラブルがない: コマンドや拡張機能はWSL内で実行されるため、他のWindowsアプリでWSLファイルを編集する時のようなファイルパーミッション関連のバグが発生しません。
- 強力なGit連携: WSL上のGitと直接連携し、VS CodeのGUIを使って直感的にGitを操作できます。
- Linux環境でのコーディング支援: LSP（Language Server Protocol）などのコーディング支援機能がWSL上でそのまま動作します。
- 統合ターミナル: VS Code内から直接WSLのターミナル（Bashなど）を実行・操作できます。
動作検証環境
- OS: Windows 11
- WSLバージョン: 2.7.3.0
- WSLディストリビューション: Ubuntu 24.04
- VS Code: 1.121.0
- Remote Development Extension Pack: 0.26.0
※WSL2を未インストールの場合は、こちらの記事を先にご覧ください。
VS Codeのインストール方法
まずは公式サイトよりWindows用インストーラをダウンロードし、Windows側にインストールします。WSL（Linux）側ではなく、Windows側にインストールする点にご注意ください。
インストール時のウィザードで、「PATHへの追加（再起動後に利用可能）」オプションにチェックが入っていることを確認してください。これが入っていないと、後述するWSL上からの code コマンドによる起動ができません（デフォルトではチェックが入っています）。
Remote Development拡張パックのインストール
Windows側でVS Codeを起動し、左メニューの「Extensions（拡張機能）」から「Remote Development」と検索してインストールします。
この拡張パックには以下の4つの拡張機能が含まれており、WSLとの連携には主に「WSL」拡張機能が使用されます。
- WSL: WSLディストリビューションとの連携
- Dev Containers: Dockerコンテナ内での開発連携
- Remote – SSH: SSHによるリモートサーバー接続
- Remote – Tunnels: トンネル機能を用いたリモート接続
WSLからVS Codeを起動
拡張機能の準備ができたら、実際にWSLからVS Codeを起動してみましょう。
まずはWindowsのターミナルなどからWSLを起動し、パッケージを最新にアップデートしておきます。
WSLの起動：
wslパッケージリポジトリのアップデート：
sudo apt-get update次に、開発用のプロジェクトディレクトリを作成して移動し、VS Codeを起動します。
※セキュリティと運用の観点から、ホームディレクトリ直下（~）ではなく、専用のプロジェクトフォルダを作成して開くことを推奨します。
mkdir -p ~/projects/my-app
cd ~/projects/my-app
code .初回の起動時は、WSL側に「VS Code Server」という連携用プログラムが自動的にダウンロード・インストールされます。
インストールが完了すると、自動的にWindows側でVS Codeのウィンドウが立ち上がります。初めて開くフォルダの場合、「Do you trust the authors of the files in this folder?（このフォルダの作成者を信頼しますか？）」というポップアップ（Workspace Trust機能）が表示されるので、「Yes, I trust the authors」をクリックします。
VS Codeの左下隅に「WSL: Ubuntu」のようにディストリビューション名が表示されていれば、WSLとの連携は正常に成功しています。
VS CodeからWSLを起動
一度WSLとの接続が確立されると、次回以降はVS Code側から直接WSL環境を開くことができます。前回WSL接続状態でVS Codeを閉じていた場合、再起動時に自動的にWSLへ再接続されます。
また、Ctrl + Shift + Pでコマンドパレットを開き、「WSL」と入力することで、WSLへの接続や新しいウィンドウの起動に関する様々なコマンドを実行できます。
WSL拡張機能の仕組み
Remote Development拡張パック（WSL拡張）を使用すると、VS Codeは「クライアント・サーバーアーキテクチャ」で動作するようになります。
VS Codeの画面表示やキー入力などのUI処理はWindows側（クライアント）が行い、実際のソースコードの管理、Git操作、プログラムの実行などはすべてWSL側（サーバー）で行われます。
これに伴い、導入する拡張機能も種類によってインストールされる場所が変わります。
- クライアント側（Windows）にインストールされる例: 「Vim」など、エディタの操作性をカスタマイズする拡張機能。
- サーバー側（WSL）にインストールされる例: 「Ruby LSP」や「Python」など、言語固有の解析やデバッグを行う拡張機能。
サーバー側にインストールされる拡張機能は、WSLのディストリビューションごとに個別でインストールを管理する必要があります。拡張機能タブを確認すると、「WSL: [ディストリビューション名] – INSTALLED」というセクションに分類されて表示されます。
VS CodeでWSLフォルダやファイルを開く
VS CodeがWSLにリモート接続された状態（左下が「WSL: ○○」となっている状態）で、上部メニューの File > Open Folder（または Open File）を選択すると、WSL（Linux）のファイルシステム内のパス（/home/username/...）が直接表示されます。
ここから開きたいプロジェクトフォルダを選択することで、Linux環境ネイティブのパフォーマンスを維持したまま、スムーズに開発を行うことができます。
※Windows側に閉じたVS Codeからネットワークパス（\\wsl$）経由でフォルダを開くと、動作が著しく遅くなる原因になるため注意してください。
VS CodeでWSL上のGitと連携する
GitがインストールされたWSL上のリポジトリをVS Codeで開くと、VS Codeの標準機能であるソース管理（GUI）を使って、WSL内のGitをそのまま操作できます。
左メニューの「Source Control（ソース管理）」アイコンから、ステージング、コミット、プッシュなどの操作が可能です。
また、Ctrl + Shift + P でコマンドパレットを開き、「git」と入力すれば、各種GitコマンドをGUI経由で実行できます。
WSL環境での具体的なGitの初期設定やGitHubとのSSH認証連携については、以下の記事で詳しく解説しています。
VS Code上でWSLターミナルを実行する
VS Codeの上部メニュー View > Terminal を選択するか、ショートカットキー Ctrl + Shift + ` を押すと、画面下部に統合ターミナルが表示されます。
WSL接続中のVS Codeであれば、このターミナルは自動的にWSL（Bashなど）のシェルとして起動します。これにより、別ウィンドウでターミナルアプリを開くことなく、コード編集とコマンド実行をVS Code単体で完結させることができます。
まとめ：WSLでの開発にはVS Codeが便利
WSL拡張機能を追加することにより、VS CodeはWindowsアプリケーションでありながら、Linuxネイティブエディタのようなシームレスな互換性を提供してくれます。
- WSLファイルシステムにおけるパーミッションなどのバグが発生しない
- WSL環境のGitやツールチェーンをVS Codeから直接操作できる
- 拡張機能がLinux側でネイティブに動作するため、LSPの恩恵をフルに受けられる
特にVimやEmacsなどのCUIエディタに不慣れな方や、使い慣れたVS Codeの環境をそのままLinux開発に活かしたい方は、開発効率が劇的に向上しますので、ぜひこの環境を構築してみてください。
WSLをさらに使いこなすための全手順はこちら！
- 関連記事: WSLを使いこなすための完全ガイド