概要

みなさんnpm scriptの実行どうやってますか〜？
僕は普段は、VS Codeのターミナルからコマンドを直接打って実行しています。
ただ、npm scriptが増えてくるとあれ、、あのコマンドなんだっけってなることあると思うんですよね、あとはプロジェクトごとにnpm scriptも変わってきますし、
今回はそんな人へ送るVS Code活用術について記事にしてみました。(織田さん、このTips教えていただきありがとうございますw)

VS Codeでnpm script をタスク登録

npm scriptってやりたいことが増えると、下記のようにめっちゃ増えていきますよね、
そうすると実行時に、あれ。。なんだっけってなりがちです。

{
    "scripts": {
        "start": "hogehoge",
        "build": "hogehoge",
        "prebuild": "hogehoge",
        "postbuild": "hogehoge",
        "run:dev": "hogehoge",
        "lint": "hogehoge",
        "test": "hogehoge"
        　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
    }
}

実はVS Codeにはビルドタスクという機能が存在ます。
このビルドタスクにnpm scriptに記載されているコマンドを設定しておくと、一発起動できます。(Macの場合、Cmd + Shift + B) / (Windowsの場合、Ctrl + Shift + B)

実際にやってみる

VSCodeにて、特定のプロジェクト内でctrl + shift + p を押します。
その後、「Tasks: Configure Default Build Task」を選択します。

そうするとビルドタスクの設定を聞かれます。
この時、VS Codeは、開いているプロジェクトのpackage.jsonのnpm scriptの設定を認識し、タスクとして登録するものの候補を表示してくれます。
なので、候補になっているものを選択するとtasks.jsonというファイルが.vscodeフォルダに作成されます。

下記が実際に作成されたtasks.jsonの中身になります。

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm", // npmによるタスクの実行を示す
			"script": "install", // 実行するコマンド名
			"group": "build",  // ビルドタスクとして認識
			"problemMatcher": [],
			"label": "npm: install",
			"detail": "install dependencies from package"
		},
		{
			"type": "npm", // npmによるタスクの実行を示す
			"script": "start", // 実行するコマンド名
			"problemMatcher": [],
			"label": "npm: start",
			"detail": "node app.js",
			"group": {
				"kind": "build", // ビルドタスクとして認識
				"isDefault": true // ここがになっていることでCmd + Shift + B で即実行できる
			}
		}
	]
}

実行してみよう

上記で登録したタスクをCmd + Shift + Bで一発実行してみると・・

ウソん失敗だと・・

どうやらzsh profileを使用しているとエラーになってしまうよう。
ちなみに私の環境はM1 Macを利用している。(なるほどね。。)

解決策は既にGitのissueに記載されているのだが、settings.jsonに以下のものを追加するだけです。

settings.jsonに開き方は、(Macの場合は: command + ,) / (Windowsの場合は: Ctrl + ,)ですね。

settings.json

    "terminal.integrated.profiles.osx": { "zsh": { "path": "/bin/zsh", "args": ["-l", "-i"] } }

さあもう一度、Cmd + Shift + Bを実行すると・・・

うまくいきましたね！

あとは、好きなコマンドを登録していけば良さそうです

ちなみにコマンド一覧からも実行することができます。

Cmd + Shift + P をやりTasks: Run Taskを入力すると登録したコマンド一覧が表示されるので、そこからも実行できます。