monorepo構成でVSCodeを使うときに便利なlaunch.json設定項目

#vscode

概要

リポジトリの直下に複数のプロジェクトディレクトリが存在する、いわゆる monorepo な環境において、VSCode の launch.json を用意する際役立ちそうな情報をまとめる。

サブディレクトリ下のプロジェクトをビルドする

Node.js なプロジェクトをビルドするケースを例にする。 program で実行ファイルを指定しつつ、Node の場合だと NODE_PATH でパッケージのインストール場所を指定してあげればいい。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Node project",
      "runtimeArgs": ["-r", "ts-node/register"],
      "program": "${workspaceFolder}/node-repo/src/index.ts",
      "env": {
        "NODE_PATH": "${workspaceFolder}/node-repo/node_modules"
      }
    }
  ]
}

サブディレクトリの repository ごとに .node-version で指定されているバージョンが異なるような場合、 "runtimeVersion": "14" といった指定を書ける。

npm script を実行したい場合などは cwd で working directory をサブディレクトリ下に移動させればいい。

{
  "name": "Launch Node project",
  "type": "node",
  "request": "launch",
  "cwd": "${workspaceFolder}/node-repo",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run", "dev"]
},

pickString を使って configuration を共通化する

複数プロジェクトの実行設定が一カ所にまとまると launch.json が肥大化する。例えば local/dev/production のような実行環境指定の差分しかないようなものは pickString で実行時に指定可能として設定を共通化できる。

Input variables - Visual Studio Code Variables Reference

{
  "version": "0.2.0",
  "inputs": [
    {
      "type": "pickString",
      "id": "environment",
      "description": "ENVIRONMENT",
      "options": [
        "local",
        "development",
        "production"
      ],
      "default": "local"
    }
  ],
  "configurations": [
    {
      "name": "Launch API",
      "program": "${workspaceFolder}/api-server/index.js",
      "request": "launch",
      "type": "node",
      "env": {
        "ENVIRONMENT": "${input:environment}"
      }
    },
    {
      "name": "Launch Frontend",
      "cwd": "${workspaceFolder}/web-frontend",
      "request": "launch",
      "type": "node",
      "cwd": "${workspaceFolder}/node-repo",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"]
      "env": {
        "ENVIRONMENT": "${input:environment}"
      }
    }
	]
}

compounds で server/client を一発起動する

フロントエンドの開発時はセットで API サーバを立ち上げる場合が多いので、複数の実行構成を一発で起動できると便利。これはcompoundsを設定しておけばできる。

Compound launch configurations - Debugging in Visual Studio Code

本来ない方が良いが、あるコンポーネント A が起動して port listen 状態になってから B を起動しないとうまく動かないといったケースもあり得る。componds は複数の configuration を並列で実行してしまうため、A のようなものはprelaunchTaskに指定するしかない。

"compounds": [
  {
    "name": "Launch product",
    "configurations": ["Launch API", "Launch Frontend"],
    "preLaunchTask": "Launch Component A",
  }
]

ここで指定できるのは launch configuration ではなく VSCode Task。本来は tsc などビルドタスクを管理する用途だが、以下のような tasks.json を用意すればプログラムの実行にも利用できる。 Tasks in Visual Studio Code

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Launch Component A",
      "type": "shell",
      "command": "npm run dev",
      "group": "build",
      "isBackground": true,
      "problemMatcher": {
        "pattern": {
          "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
          "file": 1,
          "location": 2,
          "severity": 3,
          "code": 4,
          "message": 5
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*",
          "endsPattern": "^Server listening on port [0-9]+$" // 起動が完了したとみなす出力内容を指定する
        }
      }
    }
  ]
}
Tweet