JavaScriptで開発をしていると、サクッとコンソールでjsのサンプルコードだけ動かして動作確認したいことがあります。 今まではChromeのコンソールでやっていましたが、ちっちゃくて書きにくいし整形できないしいまいちなので、VSCode上で実行したい…。nodeで動かせばいいのですが、ファイル名を指定してコマンドを打つのもめんどくさいw という観点で探したところ、理想を叶えてくれそうなプラグインがありました！
Code Runner です。
参考にさせていただきました： VSCodeで簡単にJavaScriptを実行する – 【VS Code】 | 株式会社CONFRAGE ITソリューション事業部
Code Runnerのインストール
- VSCodeの「拡張機能」からインストール
- JavaScriptファイルで右クリックして「Run Code」を実行
/bin/sh: node: command not found エラーを解消する
Node.jsのインストール（nodenv使用）
Run Codeを実行したら、/bin/sh: node: command not foundが出てしまいました。
そういえば、Node.jsをインストールしていなかったのでやっていきます。バージョン切り替えが容易なように、最初からnodenvを入れておくことにしました。
GitHub - nodenv/nodenv: Manage multiple NodeJS versions.
brew install nodenv eval "$(nodenv init -)"
nodenvはインストールされたので、Node.jsを入れていきます。 node.js公式をみると Latest LTS Version: 20.11.1 と書いてあるので、最新のv20.11.1をインストールすることにしました。
nodenv install 20.11.1 # 確認 nodenv versions 20.11.1 # とりあえずグローバルに設定 nodenv global 20.11.1 # 確認 node -v v20.11.1
Node.jsはインストールできました。が、まだエラーが解消されない……。
シェルの設定ファイルに追加
nodenvのドキュメントに「このコマンドをシェルの設定ファイルに追加してね！」と書いてあるのにやっていなかったです。自分がどのシェルを使っているのか調べるところからやります。
echo $0 -zsh # zshを使っている # nodenvの初期化設定を追加 echo 'eval "$(nodenv init -)"' >> ~/.zshrc
ちなみに、.zshrcと.zprofileのどちらに書くべきか一瞬迷いましたが、結論、.zshrcに書いとけばいいようです。
これで端末起動時にNode.jsが使えるようになりました。が、まだエラーが解消されない……。
Code Runnerの設定
一瞬焦りましたが、こちらの記事に辿り着いて解決しました。
/bin/sh: node: command not found · Issue #355 · formulahendry/vscode-code-runner · GitHub
VSCodeの設定から、「Run In Terminal」を検索してチェックボックスをONにすると動くようになりました！settings.jsonに"code-runner.runInTerminal": trueが追加されます。
これによって、Code Runnerが「出力」タブではなく「ターミナル」内で実行されるようになるようです。（でも、出力タブで実行できている人もいる…。ちょっと謎であります。）
便利！
ちょっと時間がかかりましたが、ようやく、Code Runnerが使えるようになりました。
良きJavaScriptライフを送りたいです😎
