Answer a 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.

Answers

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