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

概要

リポジトリの直下に複数のプロジェクトディレクトリが存在する、いわゆる 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