Posted at

windows 機で mac みたいな web 開発環境を用意する wsl + linuxbrew + vscode


はじめに

家に League of Legends 用の windows機(TSUKUMOさんありがとう。)があり、開発したいな〜とか思って幾星霜。

power shell とか なんか嫌だな〜とか思ってて、 bash on ubuntu on windows の時に試したけどなんか上手くいかず、環境構築を諦めていた人向け。

ちなみに 開発環境というのは npm の利用などを前提としています。


wsl

何だこれは、、、と思って コマンドプロンプトで wsl と叩く。起動。すごい(小並感)。


linuxbrew

Mac で開発している人ならほぼお世話になっているだろう brew

これが遂に wsl で対応したというので入れる。

以下は wsl 上で行う


1. wslでの最低限の環境を整える (初めての方向け)

sudo apt-get install build-essential curl file git


2. linuxbrew 入れる

sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"

結構時間かかるが、我慢


3. path を通す

echo "eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)" >>~/.profile

ここで注意なのが、 .profile というのが wsl の設定ファイル。ただ、 .bash_profile があるとそちらを読みにいってしまうので、ファイルを消すか、その中で source .profile なりをして対応しましょう。 (通算1敗)


4. 設定ファイルを読み込む

source ~/.profile

これは初回のみ

ここまでくれば、後は Mac と同じ要領でいける。 nodebrew でも nodenv でもいいので、入れよう。


 VSCode

wsl では node もとい npm の準備が整った前提で、

Windows10でWSLとVSCodeを使ってC++プログラミング環境を整える

ここに書いてあるように default のターミナルを wsl にする。

ただ私は上の記事のような設定画面でなく、 もうちっと簡単に設定できる UI が合った気がするが、、、まぁいいでしょう(よくないだろ!)


日常でのムーブ


  • コマンドプロンプトで 作業フォルダに cd

  • そこで code .

  • 作業ディレクトリと一緒に VSCode が起動

  • 新規ターミナル開く


  • wsl で開かれる

  • ハッピー 

みたいな感じでいけそう。

これだったら windows でも苦しくなく開発できそう。

もっといい方法ある人は教えてちょんまげ。