VSCode上でサクッとJavaScriptだけを動かしたいよ ~ Code Runnerを使う ~

JavaScriptで開発をしていると、サクッとコンソールでjsのサンプルコードだけ動かして動作確認したいことがありませんか？私はjsでガリガリビジネスロジックを書くことが多いので、よくあります。HTMLとかいらない。jsだけ動作確認させてくれ。

今まではChromeのコンソールでやっていましたが、ちっちゃくて書きにくいし整形できないしいまいちなので、VSCode上でできないかな〜と思って調べていたところ、理想を叶えてくれそうなプラグインがありました！

Code Runner です。

Run Codeを実行したら、/bin/sh: node: command not foundが出てしまいました。

そういえば、Node.jsをインストールしていなかったのでやっていきます。バージョン切り替えが容易なように、最初からnodenvを入れておくことにしました。

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が使えるようになりました。が、まだエラーが解消されない……。

一瞬焦りましたが、こちらの記事に辿り着いて解決しました。

VSCodeの設定から、「Run In Terminal」を検索してチェックボックスをONにすると動くようになりました！settings.jsonに"code-runner.runInTerminal": trueが追加されます。

これによって、Code Runnerが「出力」タブではなく「ターミナル」内で実行されるようになるようです。（でも、出力タブで実行できている人もいる…。Node.jsのパスとか設定によるのかな……。）

ちょっと時間がかかりましたが、ようやく、Code Runnerが使えるようになりました。

良きJavaScriptライフを送りたいです😎

30代からのプログラミング学び直し!