search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

[Visual Studio Code] [MacOS] .nvmrcで指定したバージョンに自動で切り替えてプロジェクトをスタートする

複数の Node.js プロジェクトに参加していると、利用すべき Node のバージョンがプロジェクト毎に異なる場合があって、毎回手動で切り替えるのは大変面倒なので自動化します。

動作確認環境

  • MacOS
  • Visual Studio Code

にて動作を確認しております。Mac かつ VSCode で開発をしていて、ビルドなども VSCode 上のターミナルで行なっている方は参考になると思います。

ロードマップ

  1. nvmのインストール
  2. Visual Studio Code のターミナルをzshに設定する
  3. .zshrc を作成、または編集する
  4. 自動バージョン切り替えを実行したいプロジェクトで .nvmrc を作成する

1.nvmのインストール

日本語の参考記事がたくさんありますのでそちらを参照してください。

nvm use <バージョン>

コマンドでいくつかの node バージョンを切り替えられるようになればOKです。

2.Visual Studio Code のターミナルをzshに設定する

まずは現在の VSCode のターミナルのシェルが何か、確認します。
Image from Gyazo

青枠部分がzshでない場合は設定で変更します。Mac 自体が2019年に、デフォルトの処理を bash から zsh に切り替えているので、基本的には VSCode もそれに沿う形で問題ないはずです。既に bash でいろいろ設定やってるよという方は zsh に切り替えることの影響を考慮する必要があります。
Image from Gyazo

⌘ + ,で設定パネルを開き、
Terminal › Integrated › Automation Shell: Osx
の項目で Edit in settings.jsをクリックします。

Image from Gyazo

"terminal.integrated.shell.osx": "/bin/zsh"
terminal.integrated.shell.osx の値を上記のようにします。基本的にこちらの値で問題ないと思いますが、環境によって、zshがインストールされていない、場所が違うなどあるかもしれませんのでご確認ください。

編集したら改めて VSCode 上のターミナルを確認し、zsh となっていればOKです。

.zshrc を作成、または編集する

基本これで良いはず。

$ vim .zshrc
source ~/.nvm/nvm.sh
# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  if [[ -f .nvmrc && -r .nvmrc ]]; then
    nvm use
  elif [[ $(nvm version) != $(nvm version default)  ]]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

既に .zshrc ファイルが存在している場合は既存の設定内容に影響がないか注意が必要です。また、1行目の nvm のパスも環境によっては違うかもしれません。

4.自動バージョン切り替えを実行したいプロジェクトで .nvmrc を作成する

ここまでくればただただバージョン番号が書かれた.nvmrcファイルがプロジェクトディレクトリの直下に存在していれば、プロジェクトを開いた際にnvmによるバージョン切り替えを行なってくれます。バージョン番号指定ではなくlts/*のように安定バージョンの最新というような書き方もできます。(が、該当バージョンをnvmでインストール済みでないと動かないと思います。私は常にバージョン番号で指定しているので未確認です。)

.nvmrc はコマンドラインでサクッと作成してしまいましょう。

$ echo "8.13.0" > .nvmrc #番号指定
$ echo "lts/*" > .nvmrc #最新バージョン

以上で設定完了です。VSCode で該当プロジェクトを開き、VSCode 上のターミナルを立ち上げれば .nvmrc で指定したバージョンに切り替えたことを示すメッセージがターミナルで確認できるはずです。

また、複数でプロジェクトを進める際に node のバージョンをバシッと統一するときもこの形がスマートだと思います。

参考リンク

https://qiita.com/ysd_marrrr/items/e58df8dfd509b25ff9c9
https://medium.com/fbdevclagos/updating-visual-studio-code-default-terminal-shell-from-bash-to-zsh-711c40d6f8dc
https://medium.com/@kinduff/automatic-version-switch-for-nvm-ff9e00ae67f3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0