こんちくわ
塩ハム(d)と申します

私が入っているMisskeyインスタンスのみすてむず　いず　みすきーしすてむずでアドベントカレンダーを書くということで、筆不精ながら久々にマウスをにぎにぎしてみました

ということですので、さっそく本題に参ります

0.WSL2で開発環境作るための土台を作るレシピ

材料はこちらになります

Windows Terminal
Git for Windows
Visual Studio Code (VSCode)
Windows Subsystem for Linux (WSL)
花京院の魂

システム構成図はこちらです

あ、もちろんWindows環境とオンライン環境が必要となります
また、GitHubは自分で登録お願いします
持ってない方はロマンを求め、グランドラインを突き進んでください

では調理を進めていきましょう

1.Windows Terminalの準備

インストール

賞味Microsoftの公式ページを見ればよいのですが、僕のほうでも説明していきましょう

StoreアプリからWindows Terminalをインストールします

設定例

(ここからは自由に)Windows Terminalを開き、設定を変えます(僕の好きな感じにします)

スタートアップ: 既定のプロファイルをWindows PowerShellに設定; 既定のターミナルアプリケーションをWindows Terminalに設定

外観: アプリケーションのテーマをダークに設定

規定値 - 外観: フォントフェイスをHackGen Console NFに設定(好きなフォントを設定してね); (オプション)背景画像を自分の好きな画像に(僕はデフォルト)

僕の場合はこれだけかな
ご自由にカスタマイズするのがよいでござるよ
ちなみにフォントはHackGenのリポジトリよりダウンロードしました

2.Git for Windowsの準備

このサイトからStandaloneインストーラをダウンロードしてインストールしてください
以上です、簡単ですね

3.Visual Studio Codeの準備

インストール

公式配布ページでVisual Studio Codeをインストールしてください
このページによると、[追加タスクの選択]で[PATHへの追加]をしないとめんどくさいことになりそうですよ

拡張機能の例

VSCodeを開いて、拡張機能を追加していきましょう
これについては自由ですが、僕の場合を少し書いていきましょう

Japanese Language Pack for Visual Studio Code: 日本語化する拡張機能です。いらないなら無視してください
Prettier - Code formatter: テキストを整えてくれるフォーマッタです。プラグインなんかもあるみたいですよ
Rainbow CSV: CSVファイルに色を付けて表示してくれます。見やすい
IntelliCode: これが噂のAIコーディング……！
vscode-icons: ファイルにアイコンを付けてわかりやすくしてくれます
Path Autocomplete: ファイルパスを補完してくれるぜ……
Code Spell Checker: 僕英語わかんないから……添削してくれる奴……
GitLens: Gitのなんやかんやはお任せできるやつです。有料機能もあります
Git History: ファイル単位でログを見せてくれる……らしい
Remote Development: WSL用の拡張パックです。今回は必須

設定例

初期設定をしていきましょう
VSCodeには設定項目がいっぱいです
なので頑張って設定していきましょう
よく使われるものは よく使用するもの に集められています、やさしいですね
そのぶんだけ僕の設定をここに書いていきます

Files: Auto Save - afterDelayに変更
Editor: Font Family - HackGen Console NFを行頭に追加
Editor: Render Whitespace - trailing(末尾だけ空白文字表示)に変更

意外と少ないな、よかったよかった
あとPrettier入れたのでもう少し追加、Saveを検索してください

書式設定 - Format On Save - チェックを付けるとファイル保存時にフォーマットされます

そのほかにもたくさん項目がありますので、やりたい人は好きな設定を作り上げてみては

参考リンク

一旦参考リンクです

4.Windows Subsystem for Linuxの準備

まずはC:\Users\あなたのアカウントに.wslconfigファイルを用意しましょう中身はこんな感じです(自分のメモリに合わせて調整してください)

.wslconfig

[wsl2]
memory=8GB
swap=0

そのあとこのページをやるだけですが、なんとですね

wsl --install

たったこれだけでWSL及びUbuntuの準備が整うそうです
以前にWSLを扱っている方は、たぶん調べればわかるのでさっきのページから自力で何とか頑張ってください

ちなみに私はDebianを使ってみたかったので同じディストリビューションを指定するなら

wsl --install -d Debian

としてください

このあとに、ログインユーザーのユーザー名とパスワードを聞かれますので、rootユーザーを設定してください
たぶん自由に設定するとめんどくさいです
rootユーザーだと怖い！　やだ！
……って方は頑張ってください、応援してます(僕の力量不足)

Enter new UNIX username: root
New password:
Retype new password:
passwd: password updated successfully

5.花京院の魂の準備

あ、必要ないです

6.Debianの初期設定

なげえ戦いになります

初期設定するのに日和ってるやついるぅ？！

ひよ～……

APTパッケージの設定

まずはパッケージを更新していきましょう……の前にリポジトリを日本のミラーサーバーに設定しておきましょう
できればやってほしいのですが、この手順は飛ばしてもかまいません
こちらのページのサンプルを参考に作りましょう。僕の例はこれね

nano /etc/apt/sources.list
or
vi /etc/apt/sources.list

/etc/apt/sources.list

#deb http://deb.debian.org/debian bookworm main
#deb http://deb.debian.org/debian bookworm-updates main
#deb http://security.debian.org/debian-security bookworm-security main
#deb http://ftp.debian.org/debian bookworm-backports main

deb http://debian-mirror.sakura.ne.jp/debian bookworm main contrib non-free non-free-firmware
deb http://security.debian.org/debian-security bookworm-security main contrib non-free non-free-firmware
deb http://debian-mirror.sakura.ne.jp/debian bookworm-updates main contrib non-free non-free-firmware

終わったらさっそくソフトのアップデートをしていきましょう

apt update
apt upgrade -y

VSCodeのサーバーが古い場合、wgetでアップデートされるので、wgetを入れときましょう

apt install wget -y

WindowsのPATHの追加を無効化

次はWindowsのPATHが勝手に登録されるのを防いだほうがいいかと思うので、vim /etc/wsl.confで、設定をしていきましょう

wsl.conf

[interop]
appendWindowsPath=false

そうしたら

## in WSL
exit

## in PowerShell
wsl --shutdown
Debian

をすることでWSLの再起動ができ、WindowsのPATHも切れます
その次にWindowsのPATHを無効化してしまったので、VSCodeを開けるようにエイリアスで対策します
ちゃんと あなたのWindowsのアカウント を書き換えてくださいね

echo -e 'alias code="/mnt/c/Users/あなたのWindowsのアカウント/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"' >> .bashrc

めんどくさくなってきた

Gitの準備

次のコマンドでGitをWSL内のDebianにインストールしてください

apt install git -y

つづいてGitの設定をしていきましょう

## 開発者名の設定
git config --global user.name "Your Name"
## 連絡先メールアドレスの設定
git config --global user.email "youremail@domain.com"

最低限これでいいでしょう
次はMFAに対応するためにGit Credential Managerを設定します

git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager.exe"

最新のGit以外を入れた方、インストールフォルダをカスタマイズした方はコピペではいけませんので注意
参考リンクの公式サイトで確認してください

あと疲れたんで別日に書いた記事を貼り付けておきます
こちらを参照することで、Githubにリポジトリを上げるのに苦労しないでしょう

というわけでここ見てください

そのほかの参考リンクです

参考リンク

Linux 用 Windows サブシステムで Git の使用を開始する

オプション設定(必須ではない)

次はオプションですので、やりたい方だけやるのがいいかもですね

Vimの設定
初期設定ではたいていの人は使いづらいと思います、私は無理です
しかしVSCodeを開くまでもない作業があると思いますので、その時のためにVimの設定をしておきます

apt install vim -y

次にVimをデフォルトのエディタに設定します

update-alternatives --set editor /usr/bin/vim.basic

残りは設定ファイルですが、これは本当に凝る人は凝ります
なので、皆さんが自分で探して納得のいくものをみつけてください

参考リンクです
https://korodes.com/debian11_02/

地域設定
今のところ英語で表示されている皆さんのために、日本語表示を導入していきましょう
次のコマンドで日本語環境を適用しましょう

dpkg-reconfigure locales

コンフィグ画面がでます
カーソルで移動、スペースでチェック、エンターで決定です
ja_JP.UTF-8 UTF-8を探してチェックを付けエンター
次の画面でja_JP.UTF-8を選択しエンター
一回exitして再びDebianすることで適用されているでしょう

参考リンクです
https://webkaru.net/linux/debian-locales/

VSCodeの動作確認

どこでもいいのでVSCodeの動作確認をします

code .

これでVSCode serverが更新され、Windows側でVSCodeが立ち上がるはずです
できない場合は

エイリアスが正しいか & 適用されているか
wgetが入っているか
Windows側のWSL拡張が入っているか

などを確認してください

VSCodeの拡張機能をVSCode serverにインストール

開いたVSCodeで拡張機能欄を開き、WSL:Debianの横のクラウドマークをクリックすることでVSCode serverに拡張機能がインストールされます
あとは設定を適用するだけです
設定を開き、右上付近にある設定(JSON)を開くを押して、setting.jsonを開いてください
そうしたら全選択、コピー、リモートのsetting.jsonを開いてペースト、保存です
これで設定が全て引き継がれます、楽ですね

初期設定はこれで終わりです
ここまで大変お疲れさまでした
一旦参考リンクです

参考リンク

7.プロファイルをエクスポート

ここまでやった設定を圧縮ファイルにエクスポートします
僕の場合はCドライブ直下にWSL用のフォルダを用意しましたが、出力場所はだいぶ自由です
権限の問題なさそうなところにエクスポートしましょう

wsl --export Debian C:\WSL\base.vhdx

これが開発環境のベースファイルとなります
このプロファイルをもとに自分の好きな環境を作りましょう！！

……って言ってもこの先の手順も欲しいですよね？
設定例として、Python3.11の環境を作ってみましょう

ここまでの参考リンクです

WSL の基本的なコマンド

8.ベースファイルの使い方

ベースファイルのインポート

ここではPython3.11を導入しますが、基本的には大抵の言語に対応できるはずです
それでは、プロファイル名をPython3.11として作っていきましょう
C:\WSL\devフォルダに作ると仮定します

wsl --import Python3.11 C:\WSL\dev C:\WSL\base.vhdx

これでWindowsターミナルにもPython3.11プロファイルができています
一度とじてから、Windowsターミナルを開きなおしてください
設定でいろいろいじれるので、遊んでみてください

設定が終わったら保存し、そのままPython3.11のプロファイルを選択してください
それではPythonをインストールしていきましょう

Pythonインストール

apt install python3 -y

Pythonインストール終わりです
testフォルダを作って環境を整えていきましょう

VSCodeの設定

mkdir test
cd test
code .

VSCodeが開きましたね
作成者を信頼した後は、VSCodeのプロファイルを分けるとわかりやすいと思います
VSCodeの設定 - プロファイル - プロファイルの作成で
プロファイル名：Python
コピー元：既定
という風に作ります
作った後は画面の指示に従って再起動です

Python用の拡張機能を入れていきましょう
拡張機能の検索窓にPythonと入れれば出てきます

最後にソース管理 - リポジトリの初期化
でgitの初期化ができます
あとは自由にプログラムを書いていきましょう

おわりに

開発環境の使いやすさは、プログラミング人生において比重が大きいものとなります
しかし、どんな設定が使いやすいかは人によって千差万別です
常日頃から情報をキャッチアップして、より簡単に、より楽しくプログラミングをしていきたいですね

WSL2で開発環境を作りたい人のためのレシピ

0.WSL2で開発環境作るための土台を作るレシピ

1.Windows Terminalの準備

インストール

設定例

2.Git for Windowsの準備

3.Visual Studio Codeの準備

インストール

拡張機能の例

設定例

参考リンク

4.Windows Subsystem for Linuxの準備

5.花京院の魂の準備

6.Debianの初期設定

APTパッケージの設定

WindowsのPATHの追加を無効化

Gitの準備

参考リンク

オプション設定(必須ではない)

VSCodeの動作確認

VSCodeの拡張機能をVSCode serverにインストール

参考リンク

7.プロファイルをエクスポート

8.ベースファイルの使い方

ベースファイルのインポート

Pythonインストール

VSCodeの設定

おわりに