はじめに
VSCodeでディレクトリ開いたとき、npm run devして、開発サーバー立てて、zsh開いて、、、
って毎回同じコマンド打つの面倒なのでtasks.jsonを使って自動化しようと思います。
ディレクトリ(フロントエンド)をVSCodeで開くだけで、以下のコマンドを実行します
- フロントサーバー起動 (
npm run dev) - バックエンドサーバー起動 (
bun dev) - zsh 起動
tasks.jsonとは
tasks.json は、Visual Studio Code（VS Code）で カスタムタスクを設定するためのJSONファイル です。このファイルを使うことで、プロジェクト内でよく使うコマンドやツール（例えばビルド、テスト、デプロイなど）を簡単に実行できるようになります。
From the grate GPT...
作業
tasks.jsonの作成
.vscode/tasks.jsonを作成します。
このとき、.git/info/excludeに入れておくと.gitignoreに記述せずにgit追跡から除外できるので便利です。
(チーム開発の場合、あまりレポジトリに個人の設定ファイルを含めたくない)
タスクの定義
tasks.jsonに以下を書き込みます
{
"version": "2.0.0",
"tasks": [
# 1️⃣ ⭐フロントサーバーを起動
{
"label": "front run",
"type": "shell",
"command": "npm run dev",
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
}
},
# 2️⃣ 🔥 バックエンドサーバーを起動
{
"label": "server run",
"type": "shell",
"command": "cd ../server && bun dev",
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
}
},
# 3️⃣ 🐋 zshを起動
{
"label": "shell run",
"type": "shell",
"command": "/bin/zsh",
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
}
},
# 4️⃣ 🍏 ↑をまとめて起動
{
"label": "tasks",
"type": "shell",
"dependsOn": [
"front run",
"server run",
"shell run"
],
"runOptions": {
"runOn": "folderOpen"
}
}
]
}
- 1️⃣:
npm run devで現在のディレクトリでフロントエンドサーバーを起動しています - 2️⃣: サーバーディレクトリへ移動してから
bun devでバックエンドサーバーを起動しています - 3️⃣: macの場合、
/bin/zshでzsh(ターミナル)を起動しています - 4️⃣: 最後に、これらを
tasksという名前でまとめています
自動起動の有効化
ctrl + shift + Pでパレットを開き、Tasks: Run Taskを選択し、先程作成したtasksを実行すると、開発サーバーが立ち上がります。
おわりに
RaycastのRun Script Commandを使って、コマンドでVSCode開いて、サーバーのローカルホストも開けるようにカスタマイズするともっと便利になるよ