How do I use custom environment variables in launch.json in VSCode

Question

I know this question might sound similar to this one: How do I add environment variables to launch.json in VSCode

But what I really want is to use the variables from my .env file inside the actual launch.json file, instead of using them in the program.

So my setup is something like this:

project-root/
  |-- .env
  |-- .vscode/
        |-- launch.json
  |-- src/
        |-- my-plugin/
        |-- my-theme/
  |-- wordpress/
  |-- data/
  |-- docker-compose.yml

In my .env file I have this:

PLUGIN_SLUG=my-plugin
THEME_SLUG=my-theme

Now, in my launch.json file, I would really like to be able to use the ${THEME_SLUG} and ${PLUGIN_SLUG} variables like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "/var/www/html/wp-content/plugins/${PLUGIN_SLUG}": "${workspaceRoot}/src/${PLUGIN_SLUG}",
        "/var/www/html/wp-content/themes/${THEME_SLUG}": "${workspaceRoot}/src/${THEME_SLUG}",
        "/var/www/html": "${workspaceRoot}/wordpress",
      },
    }
  ],
}

Any idea how to achieve this?

::EDIT::

After digging some further, I realized that when I set the variables globally inside /etc/profile.d/temp.sh like this:

export PLUGIN_SLUG=codeable-plugin
export THEME_SLUG=codeable-theme

After logging out of my system and back in, I'm able to use these variables anywhere, including in my launch.json file like this:

   "/var/www/html/wp-content/plugins/${env:PLUGIN_SLUG}": "${workspaceRoot}/src/${env:PLUGIN_SLUG}",
   "/var/www/html/wp-content/themes/${env:THEME_SLUG}": "${workspaceRoot}/src/${env:THEME_SLUG}",

While this is a step closer to what I want, it's not really workable, to update these variables manually in my global OS config each time I switch projects, and then log out and in again.

What extension are you using? `php` is not a valid type for launch configs. Ultimately, I think you will be at the mercy of extension support on this one sadly. I think your question is specific to php and using an `.env` file not just 'using custom env variables', because, for example, using `envFile` is already supported with node launch configs — soulshined, Aug 02 '20 at 01:29
@soulshined PHP Debug by Felix Becker. Do you have any reference to how it could be done for a simple node launch config? (without PHP) — Jules Colle, Aug 06 '20 at 05:51
Sure. You just use the built in node configurations and call the `envFile` property, enter the file name and to reference the variables you do it like you showed in your example:`${env:}` — soulshined, Aug 06 '20 at 12:22
I'm sure I tried this with a default node project and I'm pretty sure VSC does not load the .env file automatically. I believe `${env:}` is only available for global system variables. I could be wrong though. Did you find any documentation about this? — Jules Colle, Aug 06 '20 at 13:37
It does not load an `.env` file automatically, correct. That’s what the `envFile` property is for. https://github.com/microsoft/vscode-js-debug/blob/master/OPTIONS.md — soulshined, Aug 06 '20 at 13:40
Thanks, just found the docs about this: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_load-environment-variables-from-external-file-node. Would be cool if this was supported by the PHP extension as well.. I'll see where I can create an issue for this :) — Jules Colle, Aug 06 '20 at 13:42

score 4 · Accepted Answer · answered Aug 03 '20 at 12:45

You can do this with the help of the extension Command Variable v1.4.0.

You can think of the .env file as a Key-Value pair file.

You can get the value of an environment value with an input variable: ${input:name}

In the input variable you specify the file and key to use and a possible default value.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "/var/www/html/wp-content/plugins/${input:envPLUGIN}": "${workspaceFolder}/src/${input:envPLUGIN}",
        "/var/www/html/wp-content/themes/${input:envTHEME}": "${workspaceFolder}/src/${input:envTHEME}",
        "/var/www/html": "${workspaceFolder}/wordpress",
      },
    }
  ],
  "inputs": [
    {
      "id": "envPLUGIN",
      "type": "command",
      "command": "extension.commandvariable.file.content",
      "args": {
        "fileName": "${workspaceFolder}/.env",
        "key": "PLUGIN_SLUG",
        "default": "default-plugin"
      }
    },
    {
      "id": "envTHEME",
      "type": "command",
      "command": "extension.commandvariable.file.content",
      "args": {
        "fileName": "${workspaceFolder}/.env",
        "key": "THEME_SLUG"
      }
    }
  ]
}

This looks like it will work! Thanks a lot. This part of the docs I found particularly helpful: https://github.com/rioj7/command-variable#file-content-key-value-pairs — Jules Colle, Aug 06 '20 at 05:47

How do I use custom environment variables in launch.json in VSCode

1 Answers1