VS Codeでnpm script をタスク登録しておくと便利だよ (ターミナルから実行している人へ送るTips)

# 概要

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

# VS Codeでnpm script をタスク登録

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

```json
{
    "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」を選択します。

![スクリーンショット 2022-06-22 10.54.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/340bfe17-4e8d-80d8-03bc-74f2c7510786.png)

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

![スクリーンショット 2022-06-22 10.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/da22ed8b-67b5-8db2-e78a-92d86ae24b5d.png)

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

![スクリーンショット 2022-06-22 11.19.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/cdfbbe59-9261-dd4e-1276-23432a17c29b.png)

```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で一発実行してみると・・

![スクリーンショット 2022-06-22 11.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/a9f29db4-9ee7-927b-5454-81b720d61d72.png)

**ウソん失敗だと・・**

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

https://github.com/microsoft/vscode/issues/143061

**解決策は既にGitのissueに記載されているのだが、settings.jsonに以下のものを追加するだけです。**
* settings.jsonに開き方は、(Macの場合は: command + ,) / (Windowsの場合は: Ctrl + ,)ですね。

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

![スクリーンショット 2022-06-22 11.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/1db39604-ac46-43b8-e858-a1b480812dd2.png)

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

![スクリーンショット 2022-06-22 11.29.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/ce0246f0-d86e-4bb6-0114-62891f1011a4.png)

* うまくいきましたね！

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

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

![スクリーンショット 2022-06-22 11.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/d8b38cc1-7efa-8bef-232d-f67eb8f0e7ed.png)

![スクリーンショット 2022-06-22 11.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/0d6ab4f4-45d1-cb33-c212-fb65749351d2.png)