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

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

私が入っているMisskeyインスタンスの[みすてむず　いず　みすきーしすてむず](https://misskey.systems/ "みすてむずへのリンク")でアドベントカレンダーを書くということで、筆不精ながら久々にマウスをにぎにぎしてみました

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


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

材料はこちらになります

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

システム構成図はこちらです
```mermaid
flowchart LR
    GH[(GitHub)]
    subgraph Windows
        V[VSCode]
        subgraph WT[Windows Terminal]
            subgraph WSL[WSL]
                subgraph P1[Profile1]
                    VS1[VSCode server]
                    Dev1["開発環境"]
                    G1[Git]
                end
                subgraph P2[Profile2]
                    VS2[VSCode server]
                    Dev2["開発環境"]
                    G2[Git]
                end
                subgraph P3[Profile3]
                    VS3[VSCode server]
                    Dev3["開発環境"]
                    G3[Git]
                end
            end
        end
    end
    V <--> VS1 <--> Dev1 <--> G1 <--> GH
    V <--> VS2 <--> Dev2 <--> G2 <--> GH
    V <--> VS3 <--> Dev3 <--> G3 <--> GH
    
    K["花京院の魂"]
```

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


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

# __1.Windows Terminalの準備__

### インストール

賞味[Microsoftの公式ページ](https://learn.microsoft.com/ja-jp/windows/terminal/install "公式ページ")を見ればよいのですが、僕のほうでも説明していきましょう

[Storeアプリ](https://aka.ms/terminal "ブラウザのストア")からWindows Terminalをインストールします

### 設定例

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

<dl>
<dt>スタートアップ</dt>
    <dd>既定のプロファイルをWindows PowerShellに設定</dd>
    <dd>既定のターミナルアプリケーションをWindows Terminalに設定</dd>
</dl>
<dl>
<dt>外観</dt>
    <dd>アプリケーションのテーマをダークに設定</dd>
</dl>

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

僕の場合はこれだけかな
ご自由にカスタマイズするのがよいでござるよ
ちなみにフォントは[HackGenのリポジトリ](https://github.com/yuru7/HackGen "HackGen")よりダウンロードしました

# __2.Git for Windowsの準備__
[このサイト](https://git-scm.com/download/win "配布サイト")からStandaloneインストーラをダウンロードしてインストールしてください
以上です、簡単ですね

# __3.Visual Studio Codeの準備__

### インストール

[公式配布ページ](https://code.visualstudio.com/download "配布ページ")でVisual Studio Codeをインストールしてください
    [このページ](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode "公式ページ")によると、[追加タスクの選択]で[PATHへの追加]をしないとめんどくさいことになりそうですよ

### 拡張機能の例

VSCodeを開いて、拡張機能を追加していきましょう
これについては自由ですが、僕の場合を少し書いていきましょう
    
<dl>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja'>Japanese Language Pack for Visual Studio Code</a></dt>
        <dd>日本語化する拡張機能です。いらないなら無視してください</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode'>Prettier - Code formatter</a></dt>
        <dd>テキストを整えてくれるフォーマッタです。プラグインなんかもあるみたいですよ</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv'>Rainbow CSV</a></dt>    
        <dd>CSVファイルに色を付けて表示してくれます。見やすい</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode'>IntelliCode</a></dt>    
        <dd>これが噂のAIコーディング……！</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons'>vscode-icons</a></dt>    
        <dd>ファイルにアイコンを付けてわかりやすくしてくれます</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete'>Path Autocomplete</a></dt>    
        <dd>ファイルパスを補完してくれるぜ……</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker'>Code Spell Checker</a></dt>    
        <dd>僕英語わかんないから……添削してくれる奴……</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens'>GitLens</a></dt>    
        <dd>Gitのなんやかんやはお任せできるやつです。有料機能もあります</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory'>Git History</a></dt>    
        <dd>ファイル単位でログを見せてくれる……らしい</dd>
    <dt><a href='https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack'>Remote Development</a></dt>    
        <dd>WSL用の拡張パックです。今回は必須</dd>


他にもたくさんありますので、君だけの最強の拡張機能を見つけよう！
</dl>

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

- Files: __Auto Save__ - afterDelayに変更
- Editor: __Font Family__ - HackGen Console NFを行頭に追加
- Editor: __Render Whitespace__ - trailing(末尾だけ空白文字表示)に変更

意外と少ないな、よかったよかった
あとPrettier入れたのでもう少し追加、Saveを検索してください
- 書式設定 - __Format On Save__ - チェックを付けるとファイル保存時にフォーマットされます

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

### 参考リンク
一旦参考リンクです
- [VSCode(VisualStudioCode)の定番機能を一挙解説](https://qiita.com/midiambear/items/bc0e137ed77153cb421c "VSCode(VisualStudioCode)の定番機能を一挙解説")
- [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234#24-add-jsdoc-comments "VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)")
- [Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】](https://qiita.com/yamaguchi2000/items/76060c08764ce4c704f9 "Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】")



# __4.Windows Subsystem for Linuxの準備__

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

```.wslconfig
[wsl2]
memory=8GB
swap=0
```

そのあと[このページ](https://learn.microsoft.com/ja-jp/windows/wsl/install "公式ページ")をやるだけですが、なんとですね

```PowerShell
wsl --install
```
たったこれだけでWSL及びUbuntuの準備が整うそうです
以前にWSLを扱っている方は、たぶん調べればわかるので[さっきのページ](https://learn.microsoft.com/ja-jp/windows/wsl/install "公式ページ")から自力で何とか頑張ってください

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

```PowerShell
wsl --install -d Debian
```
としてください

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

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

# __5.花京院の魂の準備__

あ、必要ないです

# __6.Debianの初期設定__

なげえ戦いになります
<details><summary>初期設定するのに日和ってるやついるぅ？！</summary>
ひよ～……
</details>

### APTパッケージの設定

まずはパッケージを更新していきましょう……の前にリポジトリを日本のミラーサーバーに設定しておきましょう
できればやってほしいのですが、この手順は飛ばしてもかまいません
[こちらのページ](https://www.debian.or.jp/using/mirror.html "Debian JPプロジェクト")のサンプルを参考に作りましょう。僕の例はこれね

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

```vim:/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
```

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

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

```bash
apt install wget -y
```

### WindowsのPATHの追加を無効化

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

```vim:wsl.conf
[interop]
appendWindowsPath=false
```

そうしたら

```bash
## in WSL
exit

## in PowerShell
wsl --shutdown
Debian
```

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

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

めんどくさくなってきた

### Gitの準備

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

```bash
apt install git -y
```

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

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

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

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

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

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

というわけで[ここ](https://qiita.com/shio_hamu_d/items/90bf4cde9feb35bd56bb "WSLでVSCodeからGithubと接続する")見てください

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

### 参考リンク

[Linux 用 Windows サブシステムで Git の使用を開始する](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-git "Linux 用 Windows サブシステムで Git の使用を開始する")

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

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

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

```bash
apt install vim -y
```

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

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

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

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

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

```bash
dpkg-reconfigure locales
```

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

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

</details>

### VSCodeの動作確認

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

```bash
code .
```

これでVSCode serverが更新され、Windows側でVSCodeが立ち上がるはずです
できない場合は
- エイリアスが正しいか & 適用されているか
- wgetが入っているか
- Windows側のWSL拡張が入っているか

などを確認してください
### VSCodeの拡張機能をVSCode serverにインストール

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

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

### 参考リンク

- [WSL2 で最強の開発環境を作る](https://zenn.dev/tsubasaxzzz/articles/bestpractice-of-wsl2 "WSL2 で最強の開発環境を作る")
- [Windows / Visual Studio 使いが WSL 2 / Visual Studio Code で環境構築した時の手順](https://blog.shibayan.jp/entry/20210728/1627450686 "Windows / Visual Studio 使いが WSL 2 / Visual Studio Code で環境構築した時の手順")


# __7.プロファイルをエクスポート__

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

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

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

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

ここまでの参考リンクです
- [WSL の基本的なコマンド](https://learn.microsoft.com/ja-jp/windows/wsl/basic-commands "WSL の基本的なコマンド")

# __8.ベースファイルの使い方__

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

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

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

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

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

### Pythonインストール

```bash
apt install python3 -y
```

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

### VSCodeの設定

```bash
mkdir test
cd test
code .
```

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

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

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

# __おわりに__

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