概要
- みなさん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を入力すると登録したコマンド一覧が表示されるので、そこからも実行できます。
