PhpStormでNode.jsのバージョンを指定してタスクランナーを実行する

エンジニアの安部です。 社内のナレッジ共有ツールのKibelaに記事を書いたらCTOから「ブログ化」Reactionが押されたので記事にしています。
今回はエディタの設定についてです。

※この記事はPhpStorm 2019.3.3で検証しています。
最新/旧バージョンでは動作に差がある場合があります。

他のJetBrains社製エディタで動作するかは検証しておりませんので、ご了承ください。

Run Task 機能

Webフロントエンド開発ではタスクランナーを使って開発することが多いと思います。
ただ、タスクランナーを複数のターミナルのタブを開いて実行していると、「これ実行してたっけ?」となったり、エラーで止まっていることに気づかなかったりすることがあるのではないでしょうか。

タブが複数開いているエディタの図
Terminal Local (2) ってなんだっけ……?

PhpStorm ではそういった時のためにタスクランナーを実行するためのユーザインタフェースが用意されています。
gulpfile.js や package.json を右クリックし、「Show gulp Tasks」もしくは「Show npm Scripts」を選択します。

左ペインに「Gulp」のタブが出現し、ここにタスクが一覧で表示されるようになりました。
このタスクをダブルクリックすることで、下ペインに「Run」のタブが追加され、実行されます。
動作中のタスクのタブには緑色の円形インジケータが表示され、現在実行中かどうかがわかりやすくなっています。

Runタブと動作中watchタブはインジケータが表示され、終了済みのものには表示されない

地味に私がこの機能を気に入っている理由の一つとして、再実行時にワンクリックで済むことがあります。
ターミナルで実行している場合、 Ctrl + C で停止させたあと キーなどから再実行するのですが、Run Task からだとワンクリックで済みます。
また、ターミナルでうっかり複数の watch コマンドを実行してしまうことがあったのですが、Run Task からだと同名の実行中タスクがある場合は警告が表示され、「停止させてから再実行しますか?」と聞いてくれます。優しい。

Node.js のバージョンを指定する

私が受け持っている案件の多くで Node.js のバージョン指定があります。
nodebrew を利用して都度切り替えたり、avn を使ってディレクトリに移動するたびに自動で切り替えるなどしていましたが、複数案件が同時に動いているときもあり、あまり現実的ではありませんでした。
PhpStorm ではプロジェクトごとに Node.js や npm のバージョンを指定し、上記の Run Task などをそのバージョンで行ってくれる機能が存在しますので、あわせてご紹介します。

設定の「Languages & Frameworks」から「Node.js and NPM」を選択します。

f:id:kusamaoabe:20200322161322p:plain

「Node Interpreter」で Node.js のバイナリを指定し、「Package Manager」で npm を指定します。
私の場合は nodebrew で導入した Node.js を指定しています。

ここで指定しておくと、依存パッケージが更新された場合には Project タブから package.json を右クリックして「Run 'npm install'」からその Node.js バージョンからインストールできます。
また、先程表示していた設定画面からもパッケージの追加ができます。
ただ、あまり使いやすくはないのでパッケージの追加をする際はコマンドラインから行ったほうが楽かなとは思います。

では今回はこのへんで。
みなさんも良い PhpStorm ライフを。