[Windows ユーザー向け] Windows 11 にインストールした Windows Subsystem for Linux (WSL2) を Visual Studio Code (VSCode) で使用する

コーヒーが好きな emi です。

弊社は業務用端末として Mac ノートパソコンを利用している方が圧倒的に多く、特にエンジニアの方は Mac を使っています。そんな中私は Windows 11 を継続して使っているのですが、Mac ユーザーの方と仕事をしていると開発環境の違いで困ることがあります。

紆余曲折を経て、現在は Windows 11 にインストールした Windows Subsystem for Linux (WSL2) を Visual Studio Code (VSCode) で使用する方法に落ち着きました。
本記事ではここにたどり着くまでの紆余曲折と、開発環境を整える手順を記載します。

※あくまで私個人の経験と判断で本環境を利用しています。ご自身の所属する企業のルールや運用ルールをご確認の上、ご自身の判断で環境を整えてください。

▼本記事で再現する環境イメージ

なぜ Windows 11 にインストールした WSL2 を VSCode で使用しようと思ったのか

私の経験談になります。

なぜ Windows ?

• 使い慣れた OS であるから
  • 私はずっと Windows で仕事をしてきたのと、Windows Server を使った基幹システムの構築現場に長くいたため使い慣れています。
• ★ Windows を利用されているお客様がいるから
  • お客様のお手元の端末が Windows であるケースが多くあります。「WinSCP を使いたいです」 「Windows で SSH したいんですがこの環境だとどうしたらいいですか？」 などのお問い合わせをいただいたとき、自身が Windows だとお客様のご要望のイメージもつきやすいし、対応検証もすぐできます。

お客様が Windows を使われているケースで圧倒的に役に立つのが良いです。

※ もし今後 「お客様企業の社員が全員 Mac で基幹システムも全部 Linux で Windows を使っていません」 というケースが圧倒的に増加した場合はその時考えます。

なぜ VSCode ?

一番よく使っている、私にとって使い勝手のいいコードエディタであるため利用しています。ターミナルが下部に出るのも良いです。

Windows 端末も Mac 端末も同様にインストールして使えますし、様々な拡張機能により開発も生成 AI 機能も便利に使えます。Mac ユーザーと同様に使えるため、Mac ユーザーと同じ目線で会話できるのも良いです。

特に 改行コードを自由に変更できる ところが好きです。Linux 系のスクリプトを作成するときに Windows だと改行コードでエラーになることが多いのですが、VSCode だと右下に現在の改行コードが表示されていてすぐに変更できるので便利です。

マルチカーソル機能（まとめて選択したり、全体のインデントをまとめて揃えたりするイケた機能）が使えるのも便利です。詳細は VSCode マルチカーソル 等のワードで検索してください。

なぜ WSL?

WSL2 は Windows の中で動く仮想サーバーのようなものと思っていただいて OK です。

私は Terraform 開発時に周囲の Mac ユーザーと足並みそろえるのが非常に大変だった経験があるため、開発環境が必要なタイミングでは WSL を利用するようになりました。

• 困ったポイント
  • 改行コードの違いでコンフリクトする
  • Mac と Windows ではファイルの権限管理の仕組みやタイムスタンプの扱いが異なるため source_code_hash が変わってしまい意図しない変更が Lambda に走ってしまう
  • etc...

※source_code_hash は Lambda 関数のソースコードの変更を検知し、更新のトリガーとして使用されるハッシュ値です。

その他、開発者がよく使うコマンドは Windows 版が存在していても、実際の使用例やトラブルシューティング情報が Mac/Linux 版と比べて圧倒的に少なく、問題解決に時間がかかることが多々あったり、実際の運用を考えると代替手段を探す必要があったりします。
せっかく手順が解説された記事を見つけても、「まず brew でインストールしてください」 と書かれていたら、別の方法を考えなければなりません。

ちなみに Terraform 開発で Windows ユーザーと Mac ユーザーが混在して両方いる場合は .editconfig を設定するのが良いようです。が、Windows ユーザーが少数のためにこれを整備するのが億劫でした。

PowerShell コマンドを別途調査するのが大変だったりもするので、WSL に落ち着いたという経緯です。

以下は実際に私の Windows 端末で整えている環境の例です。Windows でも WSL でも AWS CLI や Git を使えるようにしていて、ご案内するお客様の環境に合わせてどちらも対応できるようにしています。

▼実際の私個人の環境イメージ

WSL2 のインストール

WSL のインストール | Microsoft Learn を参考に、WSL2 をインストールします。

https://learn.microsoft.com/ja-jp/windows/wsl/install

管理者権限の PowerShell で以下コマンドを実行し、WSL2 をインストールします。

wsl --install

このコマンドにより、WSL を実行し、Linux の Ubuntu ディストリビューションをインストールするために必要な機能が有効になります。
コマンドの実行後は Windows 端末の再起動を求められるので、PowerShell を閉じて端末を再起動します。

再起動するとデフォルトの UNIX ユーザアカウントを作成するよう求められます。Windows のユーザ名と一致する必要はないので、自由にユーザ名を入力します。

パスワードを求められるので2回入力します。これで WSL2 のセットアップは完了です。
wsl --install コマンドを使用すると、バージョンは既定で WSL2 になります。

WSL2 インストール後の見え方

Windows メニューを開いて 「ubuntu」 と検索すると、インストール済みのアプリとして出てきます。必要に応じてスタートメニューに追加したり、タスクバーに追加したりしてください。

開くと以下のようなコマンドを打ちこめる画面になります。（私はユーザー名を emiki としています。@ 以降は Windows 端末のホスト名です）

ここからコマンド実行できます。

「WSL2 は Windows の中で動く仮想サーバーのようなもの」 と書きました。WSL 内で作成したディレクトリやファイルはどのように確認するかというと、以下キャプチャのようにエクスプローラーからネットワークフォルダとして確認できます。

home の下にユーザー名のディレクトリがあり、その配下に各種ディレクトリやファイルが格納されています。Windows から WSL 内にディレクトリやファイルのコピペができ、その逆もできます。

必要に応じて、Git や AWS CLI などを WSL にインストールして使ってください。WSL にインストールする場合は Linux（Ubuntu）の手順でインストールします。 Windows の手順で実施するとエラーになりますので注意してください。

https://git-scm.com/book/ja/v2/使い始める-Gitのインストール

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

VSCode のインストール

続いて Windows 端末自体に VSCode をインストールします。

以下にアクセスして、Download for Windows から Windows 版のインストーラーをダウンロードしてインストールしてください。

https://code.visualstudio.com/

WSL 拡張のインストール

VSCode がインストールできたら、WSL 拡張をインストールして VSCode から WSL に接続していきます。

左の拡張機能のマーク（四角が 4 つ並んでいるようなマーク）をクリックして、WSL の拡張機能を VSCode にインストールします。「WSL」 で検索すると Linux のペンギン（ 「タックス」 という名前だそうです）が出てくるので、これを選択してインストールボタンを押します。

（私の VSCode にはすでに WSL 拡張がインストール済みなので、キャプチャでは 「アンインストール」 ボタンが表示されていますが、未インストールだと 「インストール」 ボタンになっているはずです）

WSL 拡張がインストールできたら、左下のリモートボタンをクリックすると、「WSL への接続」というメニューが出るのでクリックします。

VSCode で別のウィンドウが開きます。これで、WSL 環境に接続した VSCode が使えるようになりました。

下部から引っ張り上げるようにすると WSL のターミナルが開きます。
左メニューの一番上のファイルマークをクリックするとフォルダが開けます。

あとは、VSCode で接続できている WSL 内に git コマンドで GitHub などのリモートリポジトリからコードを clone してきたり、各種ライブラリなどをインストールして開発を進めたりできます。tenv で Terraform を使うこともできます。
リモートリポジトリに接続する際の鍵なども WSL 内のディレクトリに配置するようにしてください。

おわりに

Mac ユーザーと一緒に開発する際の環境設定メモでした。

本記事への質問やご要望については画面下部のお問い合わせ「DevelopersIO について」からご連絡ください。記事に関してお問い合わせいただけます。

参考

https://code.visualstudio.com/brand

https://dev.classmethod.jp/articles/try-tenv-terraform-version-manager/