@ledsun blog

無味の味は佳境に入らざればすなわち知れず

Windows上でWSLを使った開発環境を作る

WSLも仮想マシン(?)なので、MacでのDockerと同じくファイルの同期が遅いようです。 そこでDeveloping in the Windows Subsystem for Linux with Visual Studio Code を参考にして、ファイルをWSL上で置いて、Windows上のVSCodeから編集出来るようにします。

この手順はとても簡単です。 VSCodeRemote Development - Visual Studio Marketplaceをいれて、WSLからcode .を実行すれば、それで終わりです。

WSL上に開発環境をつくるのに、ほかにもいろいろなツールを入れます。 そのメモを残します。

WSL

WSL のインストール | Microsoft Docs

wsl --install

を実行すれば良いようです。

f:id:ledsun:20211102221906p:plain
WSLをインストール中

あっさりいきすぎてあまりよく覚えていません。

sudo apt update && sudo apt upgrade

忘れがちですが、パッケージの更新はしておきましょう。

Windows Terminal

コマンドプロンプトとかPowerShellとか使い分けるのが難しいですし、見た目もちょっと微妙なのでWindows Terminalを入れます。

www.microsoft.com

Windows Terminalはタブで複数のセッションが開けます。

f:id:ledsun:20211102222243p:plain
タブでいろいろなターミナルが開けます

僕はPowerShellはあまり上手く使いこなせていないので、既定のシェルをUbuntuに設定すると便利です。

デフォルトだとUbuntuの新しいセッションをはじめた時に、ディレクトリがWindows側のホームディレクトリになります。 WSL側のホームディレクトリになって欲しいので、 Start Windows Terminal in WSL2 home directory – Dan O'Sullivan's blog を参考にして設定しました。

f:id:ledsun:20211102222655p:plain
コマンドラインbash.exe ~に設定

どういう仕組みでディレクトリが変わるのか、まるでわかっていません。

Node.js

WSL 2 上で Node.jis を設定する | Microsoft Docs

ubuntuの場合は、Node.jsを直接インストールするとnpm i -gするときにsudoを求められます。 とくにバージョンにこだわりがない場合でも、nvmを使うのが無難です。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Nodeの最新版を入れるとwebpackの実行時にエラーが出ました。 Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED - Stack Overflow を参考にしてLTSを入れました。

ターミナルを開き直して

nvm install --lts

を実行します。

Ruby

RubyMacでrbenv + ruby-buildを使っています。 Install/Use rbenv (Ruby) on Windows 10 Linux WSL(2) | by Hervé Leclerc | alter way | Mediumを参考にして同じ環境を作ります。

ubuntuの場合はデフォルトでは.bash_profileがありません。 追加すると、bashrcが読まれなくなります。 パスは.bashrcに追加します。

echo 'export PATH=$HOME/.rbenv/bin:$PATH' >> ~/.bashrr

GitHub - rbenv/rbenv: Groom your app’s Ruby environment

これだとrubyが見つからないので、

eval "$(rbenv init - bash)"

も.bashrcに追加します。

Fork

Git用にForkを使っています。 Launch git-fork app from WSL - DEV Communityに従ってalias fork='/mnt/c/Windows/System32/cmd.exe /c "%USERPROFILE%\\AppData\Local\Fork\Fork.exe "$(wslpath -w -a .)'を設定すれば、WSLの任意のディレクトリからForkが起動できます。

ただ、次のリンクにあるように、ファイルのモードの違いが変更として検出されます。

差分管理として使うのは、ちょっと怪しいです。 今のところ、コミットはVSCodeのGit機能を使って、Forkは対話リベースにだけ使っています。

open-cli

これは入れたというか、前から使っていたのを試しにつかったら動いて驚きました。

npx open-cli 'http://localhost:8000/dev/development.html'

で、Windows側のブラウザ開くんすよ。びっくりー

GitHub - sindresorhus/open: Open stuff like URLs, files, executables. Cross-platform.

Supports WSL paths to Windows apps.

すごい

あとやりたいと思っていること

感想

思ったより、環境設定で困りませんでした。 プログラマとして、WindowsとWSLだけで生きていくことも出来そうな気がしてきました。