こんちくわ
塩ハム(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 - チェックを付けるとファイル保存時にフォーマットされます
そのほかにもたくさん項目がありますので、やりたい人は好きな設定を作り上げてみては
参考リンク
一旦参考リンクです
- VSCode(VisualStudioCode)の定番機能を一挙解説
- VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)
- Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】
4.Windows Subsystem for Linuxの準備
まずはC:\Users\あなたのアカウントに.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
#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で、設定をしていきましょう
[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することで適用されているでしょう
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の環境を作ってみましょう
ここまでの参考リンクです
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の初期化ができます
あとは自由にプログラムを書いていきましょう
おわりに
開発環境の使いやすさは、プログラミング人生において比重が大きいものとなります
しかし、どんな設定が使いやすいかは人によって千差万別です
常日頃から情報をキャッチアップして、より簡単に、より楽しくプログラミングをしていきたいですね