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.

user_9938317 · Answer

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"
      }
    }
  ]
}

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

1 Answers