30
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

概要

  • みなさん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」を選択します。

スクリーンショット 2022-06-22 10.54.05.png

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

スクリーンショット 2022-06-22 10.54.59.png

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

スクリーンショット 2022-06-22 11.19.21.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

ウソん失敗だと・・

  • どうやら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"] } }

スクリーンショット 2022-06-22 11.28.00.png

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

スクリーンショット 2022-06-22 11.29.41.png

  • うまくいきましたね!

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

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

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

スクリーンショット 2022-06-22 11.35.32.png

スクリーンショット 2022-06-22 11.35.48.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
30
Help us understand the problem. What are the problem?