How I Use Split Terminals in VSCode for Multi-App Development

When working on a monorepo with multiple apps, I need several terminals open simultaneously. Manually setting them up every time I open the project is tedious. Here's how I automate it using the Restore Terminals VSCode extension.

The Setup

I use a .code-workspace file to configure my terminal layout. When I open the workspace, all my terminals are automatically created with the right names and commands.

Here's my configuration for a project with an admin app and a worker app:

{
  "folders": [
    {
      "path": "../Documents/rogerapps-turbo"
    }
  ],
  "settings": {
    "restoreTerminals.terminals": [
      {
        "splitTerminals": [
          {
            "name": "admin",
            "commands": ["admin"]
          },
          {
            "name": "admin storybook",
            "commands": ["pnpm run storybook:a"]
          }
        ]
      },
      {
        "splitTerminals": [
          {
            "name": "worker",
            "commands": ["worker"]
          },
          {
            "name": "worker storybook",
            "commands": ["pnpm run storybook:w"]
          }
        ]
      },
      {
        "splitTerminals": [
          {
            "name": "script",
            "commands": ["cd support/scripts"]
          }
        ]
      },
      {
        "splitTerminals": [
          {
            "name": "git",
            "commands": []
          }
        ]
      }
    ]
  }
}

How It Works

Each object in restoreTerminals.terminals creates a terminal tab. Within each tab, splitTerminals defines the split panes.

My layout:

Getting Started

  1. Install the Restore Terminals extension
  2. Create a .code-workspace file with your terminal configuration
  3. Open the workspace file in VSCode

Now every time you open the workspace, your terminals are ready to go.