Environmental

Environmental adds a sidebar panel with environment management for debugging:

• Checkbox environments: Select multiple at once (standard behavior)
• Option groups: Choose one option from a group (radio-button style)

It reloads .vscode/envs.json before every debug start and merges the selected environment variables into the debug configuration.

envFile is supported for:

• checkbox environment entries
• option groups
• options inside a group

Merge precedence matches your requirement: envFile is loaded first, then inline env overrides keys from that file.

Commands

• Environmental: Open Panel — Show the environment manager sidebar
• Environmental: Reload envs.json — Force reload configurations
• Environmental: Choose Environments — Quick-pick flow for checkbox environments and option groups

envs.json format

Checkbox-style environment

Multiple can be selected at once:

{
  "environments": [
    {
      "name": "Local API",
      "description": "Local backend and verbose logging",
      "envFile": "${workspaceFolder}/.env.local",
      "env": {
        "API_BASE_URL": "http://localhost:8080",
        "LOG_LEVEL": "debug"
      }
    }
  ]
}

Option group (radio-button style)

Only one option per group can be selected:

{
  "environments": [
    {
      "name": "Database Connection",
      "description": "Choose your database target",
      "envFile": ".env.db.common",
      "env": {
        "DB_PORT": "5432"
      },
      "options": [
        {
          "name": "local",
          "envFile": ".env.db.local",
          "env": {
            "DB_HOST": "localhost",
            "DB_NAME": "dev_db"
          }
        },
        {
          "name": "staging",
          "envFile": ".env.db.staging",
          "env": {
            "DB_HOST": "staging-db.example.com",
            "DB_NAME": "staging_db"
          }
        }
      ]
    }
  ]
}

Mixed configuration

Combine both types in one file:

{
  "environments": [
    {
      "name": "Enable Debug Logging",
      "env": {
        "DEBUG": "*"
      }
    },
    {
      "name": "API Endpoint",
      "options": [
        {
          "name": "local",
          "env": {
            "API_URL": "http://localhost:8080"
          }
        },
        {
          "name": "production",
          "env": {
            "API_URL": "https://api.example.com"
          }
        }
      ]
    }
  ]
}

How it works

1. Sidebar panel shows all environments and option groups with checkboxes/radio buttons
2. Checkbox environments can be toggled independently; multiple can be selected
3. Option groups expand to show choices; only one option is selected per group
4. Selection persists in workspace state between sessions
5. Debug hook reloads envs.json and merges selected configs into debugConfiguration.env before launching
6. Choose Environments command first asks for checkbox entries, then asks one quick pick per group

envFile load order

For a selected checkbox environment:

1. load envFile
2. overlay inline env

For a selected option group:

1. load group envFile
2. overlay group env
3. load selected option envFile
4. overlay selected option env

Later layers win on key conflicts.

In the group quick-pick step, the currently selected option is shown first so pressing Enter keeps it.

State model

• Menu changes do not rewrite .vscode/envs.json.
• Current selection state is stored in VS Code extension workspace state (per workspace).
• envs.json defines available entries and env values only; current selection is managed by the extension state.

Customisation

Icons

You can add custom icons to your environments by including an icon property in your envs.json entries. The value can be a name of integrated VS Code icon or a path to a custom SVG file in your workspace. The icons in VS Code are not really clear to me, but with some hope you can use colored icons from your instance using file scheme. Check test enviroment for examples.