【VSCode】開発サーバーの起動を自動化する tasks.json の設定方法

はじめに

VSCodeのtasks.jsonを使えば、プロジェクトを開いた瞬間に開発サーバーを自動起動できます。この記事では、基本的な設定方法と、うまく動かない場合の対処法を紹介します。

基本設定: シンプルな自動起動

npm run devやnpm startを実行するだけのシンプルなケースです。

設定ファイルの作成

ルートディレクトリに.vscode/tasks.json を作成し、以下を記述します：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend Dev Server",
      "type": "shell",
      "command": "npm run start",
      "isBackground": true,
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "focus": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      },
      "problemMatcher": []
    }
  ]
}

主要な設定項目の説明

項目	説明
command	実行するコマンド
isBackground	タスクをバックグラウンドで実行し続ける(サーバー向け)
runOn: "folderOpen"	フォルダを開いた時に自動実行
panel: "dedicated"	専用のターミナルパネルを使用
reveal: "always"	タスク実行時に常にターミナルを表示

これで、プロジェクトを開くだけで開発サーバーが起動します！

前処理が必要な場合の設定

データベースのマイグレーションや環境変数の設定など、サーバー起動前に処理が必要な場合の設定例です。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Database Migration",
      "type": "shell",
      "command": "rails db:migrate",
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": false
      },
      "problemMatcher": []
    },
    {
      "label": "Rails Dev Server",
      "type": "shell",
      "command": "bundle exec rails s",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      },
      "dependsOn": ["Database Migration"],
      "problemMatcher": [],
      "isBackground": true
    }
  ]
}

ポイント

• dependsOn: 指定したタスクを先に実行
• panel: "shared": 複数タスクで同じターミナルを共有
• focusの使い分け: 前処理はfalse、メインタスクはtrue

応用: うまく動かない場合の対処法

「command not found」エラーが出る場合や、バージョン管理ツールを使用している場合は、bash -licを使用します。

bash -lic が必要なケース

以下のような環境では、コマンドが見つからないエラーが発生することがあります：

• WSL環境でNode.jsやRubyを使用
• nvm(Node Version Manager)でNode.jsを管理
• rbenvでRubyを管理
• pyenvでPythonを管理
• asdfで複数言語を管理
• .bashrcにカスタムPATHや環境変数を設定している

確認方法

ターミナルで以下を実行して、コマンドのパスを確認します：

which npm
# /home/user/.nvm/versions/node/v18.0.0/bin/npm
# ↑ ホームディレクトリ配下なら bash -lic が必要

# /usr/bin/npm
# ↑ システムパスなら直接実行でOK

bash -lic を使った設定

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Frontend Dev Server",
      "type": "shell",
      "command": "bash",
      "args": ["-lic", "npm run start"],
      "isBackground": true,
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "focus": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      },
      "problemMatcher": []
    }
  ]
}

bashオプションの説明

• -l (login shell): .bash_profileや.profileを読み込む
• -i (interactive): .bashrcを読み込む
• -c (command): 指定したコマンドを実行

参考

なぜ必要？

VSCodeのタスクはノンログインシェルで起動されるため、通常は.bashrcが読み込まれないようです。

Railsでの例

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Database Migration",
      "type": "shell",
      "command": "bash",
      "args": ["-lic", "rails db:migrate"],
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": false
      },
      "problemMatcher": []
    },
    {
      "label": "Rails Dev Server",
      "type": "shell",
      "command": "bash",
      "args": ["-lic", "bundle exec rails s"],
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      },
      "dependsOn": ["Database Migration"],
      "problemMatcher": [],
      "isBackground": true
    }
  ]
}

まとめ

• 基本は直接コマンドを実行：シンプルで保守性が高い
• うまく動かない場合はbash -licを試す：特にWSLやバージョン管理ツール使用時
• 前処理はdependsOnで管理：依存関係を明確にする

これで、プロジェクトを開くだけで開発環境が整う
快適な開発体験を実現できます！