VisualStudioCodeでnpmタスクを実行する

More than 3 years have passed since last update.


概要

visual studio codeでnpmタスクを実行する。

前回gulpのタスクを実行することはやったので、もう少し粒度を小さく。

例えばpm2 を使っているアプリケーションとする。(pm2の使い方については pm2 - node.js プロセス管理パッケージを参照してくれれば良いかと。)

pm2を使う場合、以下の方法で起動、停止などは以下のように書ける。

pm2 start processes.json

pm2 restart processes.json
pm2 stop processes.json
pm2 delete processes.json


npmで実行する

npmでそれを実行しようとするとpackage.jsonには以下のようにかいて

{

(中略)
"scripts": {
"start": "pm2 start processes.json",
"restart": "pm2 restart processes.json",
"stop": "pm2 stop processes.json",
"delete": "pm2 delete processes.json"
},
(中略)
}

以下のように実行する。

npm run start

npm run restart
npm run stop
npm run delete


vscodeでタスクを起動する

vscodeでctrl+shift+pをおしてから「Tasks: Configure Task Runner」を選択する。次にタスクの設定を聞かれるので、npmを指定する。すると、tasks.jsonを.vscodeフォルダに作成される。

この時点でctrl+pをおしてから「task 」とタイプすると、install、update、testというのが選択できるよう状態になっているはず。……start、restartとかがない。

tasks.jsonの中身を見てみると、以下のようになっている

{

(中略)
"tasks": [
{
"taskName": "install",
"args": ["install"]
},
{
"taskName": "update",
"args": ["update"]
},
{
"taskName": "test",
"args": ["run", "test"]
}
]
}

gulpだと勝手にタスク読み込んでくれてたのに…と思ったけど、よく考えてみるとnpmでstartを実行しようとすると、上記でやったように、npm run startって書かないといけない。つまり、run startが引数なわけだ。npm installとかいろいろあるから、仕方ないね。

そういうわけで、startとかを書いてみると書いてみると以下のようになる。

{

(中略)
"tasks": [
{
"taskName": "install",
"args": ["install"]
},
{
"taskName": "update",
"args": ["update"]
},
{
"taskName": "start",
"args": ["run", "start"]
},
{
"taskName": "restart",
"args": ["run", "restart"]
},
{
"taskName": "delete",
"args": ["run", "delete"]
},
{
"taskName": "stop",
"args": ["run", "stop"]
}
]
}

で、この時点でctrl+pをおしてから「task 」とタイプすると、startなどがでてくるはず。


まとめ

visual studio codeでnpmタスクを実行するところができた。

.vscodeフォルダに入るものは基本共有するべきものじゃない(と思っている)ので、個人的に使う簡単なスクリプトとかを書いておくと便利(フォルダ構成を引数に渡すとか)……かな……