WSL2 + VScode + nodenv(anyenv)の環境構築方法まとめ

公式ドキュメントの通りにWSL2をインストール

• ディストリビューションはUbuntuを選択してください

VScodeとの連携

• VScodeをインストール
• VScodeに拡張機能「emote Development」を追加
• WSL側からVScodeを起動するためにUbuntuコンソールを起動
• Ubuntuコンソールが初回起動の場合は下記のコマンドを実行

$ sudo apt update
$ sudo apt upgrade

• 下記のコマンドでVScodeをWSL側から起動することで連携が完了する

$ code .

brewのインストール（任意）

• 公式ドキュメントを参考にインストールすれば良い

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
$ test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
$ test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
$ test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
$ echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile

anyenvのインストール

$ git clone https://github.com/anyenv/anyenv ~/.anyenv
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ ~/.anyenv/bin/anyenv init

もし下記の警告が出た場合は・・・

ANYENV_DEFINITION_ROOT(/home/username/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

下記のコマンドを実行すると警告が直るはず

anyenv install --init

一通りできたらbashを再起動する

なぜかコンソール画面のコマンドがハイライトされない場合

下記を.bash_profileの先頭につけてあげると直る

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

nodenvのインストール

下記のコマンドを実行する

$ anyenv install nodenv
$ exec $SHELL -l

anyenv-updateのインストール

すべてのenvをまとめてアップデートしてくれるプラグインを下記のコマンドで導入する

$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

nodenv-default-packagesのインストール

npmインストール時にデフォルトでインストールするパッケージを設定できるプラグインを下記のコマンドで導入する

$ git clone https://github.com/nodenv/nodenv-default-packages.git $(nodenv root)/plugins/nodenv-default-packages
$ touch $(nodenv root)/default-packages

上記のコマンドで作成したdefault-packagesを編集するとデフォルトインストールしてくれる

「default-packages」の例

typescript
ts-node
typesync

yarnをインストールする

nodenv-yarn-installを使ってyarnをnodenv環境にインストールします

git clone https://github.com/pine/nodenv-yarn-install.git "$(nodenv root)/plugins/nodenv-yarn-install"

nodenvによるNode.jsのインストールの実行

やっとこさnode.jsをインストールします！

インストール可能なnodeバージョン一覧を表示
$ nodenv install -l

任意のバージョンのnodeをインストールする
$ nodenv install XX.X.X

デフォルトで適用されるnodeバージョンを設定
$ nodenv global XX.X.X

Yarnが使えるか確認
$ yarn -v
X.XX.X

Yarnの実行ファイルの場所を確認
$ which yarn

最終的な.bash_profileの内容

.bash_profileの内容で結構詰まりました！参考までにどうぞ！

.bash_profile

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"

eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
eval $($(brew --prefix)/bin/brew shellenv)