こんな方へ特におすすめ
- 新卒エンジニアになった方
- 本格的な開発環境を構築したい方
概要
こんにちは。サイオステクノロジーのはらちゃんです！新卒として4月に入社し、今回初めてのブログ執筆です。
VS CodeはWSL上で起動すべきだという3つの理由とその手順をお伝えします。
WSLとGit Bashの違いについて気になる方は、こちらのブログをご覧ください。
わたしの悩み
Windows PCで開発環境を整え、いよいよコーディングを始めようとしたとき、先輩エンジニアからこう言われました。
「VS CodeはWSL上で起動するようにね」
Windows上でアイコンをクリックすれば快適に動くのに、なぜわざわざ黒い画面（ターミナル）から起動する必要があるんだろう…？
私も最初はそう思い、少し戸惑いました。
しかし、この「WSL上でVS Codeを起動する」という一手間には、将来のあなたの開発効率を劇的に向上させる、明確で重要な理由が3つあったのです。
今回は、その理由と具体的な手順を分かりやすく解説します。
3つの理由
理由1：Linuxの圧倒的なパフォーマンスを活かせる
「
npm installがやたら遅い…」「 git status の表示に時間がかかる…」
もしあなたがWindows上で直接これらのコマンドを実行しているなら、その原因はファイルシステムの相性の悪さかもしれません。
Windowsが使っている「NTFS」というファイルシステムは、Linux向けのツール群との相性が良くありません。一方、WSL内のLinuxが使っているファイルシステム（ext4）は、これらのツールが最高のパフォーマンスを発揮できるよう最適化されています。
VS CodeをWSL上で起動することで、ファイル操作がすべてLinux内で完結するため、驚くほどコマンドの実行が速くなります。この速度差は、日々の開発業務において大きなストレス軽減に繋がります。
理由2：ツールの「互換性」問題を根本から回避できる
Web開発で使われるツールの多くは、元々Linux環境で使われることを前提に作られています。そのため、Windows環境でそのまま使おうとすると、様々な互換性の問題に直面することがあります。
- パスの記法: Windows
C:\Users\TaroとLinux/home/taroのようなパスの違い。 - シェルスクリプト: OSによるコマンドの違いで、配布されたスクリプトが動かない。
- Docker: Linuxカーネルの機能に依存しているため、WSL2上が最もスムーズ。
VS CodeをWSL上で起動すれば、あなたの開発環境はLinuxそのものになります。これにより、厄介な互換性の問題を未然に防ぎ、ツールの導入や実行で悩む時間を大幅に削減できます。
理由3：チーム開発で「環境差異」に悩まなくなる
「自分のPCだと、なぜか動かない…」
チーム開発で最も避けたいのが、この環境差異によるトラブルです。チームにmacOSやLinuxを使っているメンバーがいると、OSの違いが原因で、あなただけがエラーに遭遇するケースは少なくありません。
簡単！WSLから起動する手順
前提条件
- WSL2（Ubuntuなど）がインストールされていること。
- WindowsにVisual Studio Code本体がインストールされていること。
ステップ1：拡張機能「Remote – WSL」をインストールする
まず、VS CodeとWSLを連携させるための公式拡張機能をインストールします。
- Windows上で普通にVS Codeを起動します。
アプリのアイコンかスタートメニューで検索してください
- 左側のアクティビティバーにある四角いアイコン（拡張機能）をクリックします。
画面左のメニューバーから拡張機能（上から6つ目）を選択できます
- 検索バーに「Remote – WSL」と入力します。
- 表示された拡張機能（Microsoft製）の「インストール」ボタンをクリックします。
ステップ2：WSLターミナルから「code .」で起動する
次に、WSLのターミナルからVSCodeを起動します。
- Windows TerminalやUbuntuのアプリなどから、WSLのターミナルを起動します。
画像はUbuntuです。ご自身の環境に合わせてください
cdコマンドを使って、開発プロジェクトのあるディレクトリに移動します。
# 例：ホームディレクトリの 'projects/my-app' に移動
cd ~/projects/my-app- そのディレクトリで、以下のコマンドを実行します。
code .code . は、「今いるディレクトリ（カレントディレクトリ）をVS Codeで開いて」という意味のコマンドです。
初めて実行する際は、WSL側にVS Codeのサーバーが自動でインストールされるため、少し時間がかかります。2回目以降はすぐに起動します。
起動したVS Codeの左下が緑色になり、「WSL: Ubuntu」のように表示されていれば成功です！これであなたのVS Codeは、WSL環境に接続された状態で動いています。
まとめ｜Windows × WSL × VS Codeは「最強の組み合わせ」
今回ご紹介した方法は、Windowsの快適なUIと操作性を享受しつつ、Linuxの強力で安定した開発環境の恩恵も受けられる、まさに「いいとこ取り」のテクニックです。
最初は少し不思議に感じるかもしれませんが、この方法を一度マスターすれば、今後のあなたのエンジニアキャリアにおいて、計り知れないメリットをもたらしてくれるはずです。
Windowsでの開発に、もはや妥協は必要ありません。今日からあなたも「
code .」をWSLで叩いて、快適な開発ライフをスタートさせましょう！
