How can you set up environment variables in vscode?

2 years ago
Olivia Parker
2 minutes

To set up the environment variables for VS Code, follow these steps:

  1. Open VS Code and go to the “Extensions” panel, search for and install an extension called “DotENV”.
  2. In the menu bar of VS Code, select “File” -> “Preferences” -> “Settings”, then in the settings panel on the right side, locate “Editor” -> “Customize Settings”.
  3. configuration file
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "support.variable.env",
            "settings": {
                "foreground": "#FFA500"
            }
        }
    ]
},

This code will add orange text color to the environment variables.
4. Save and close the settings.json file.
5. Open the command palette in VS Code (shortcut: Ctrl + Shift + P), then type “DotENV: Add .env” and select the command. This will create a file named .env in your project root directory.
6. Open the .env file and add the environment variables you need, one variable per line, for example:

DATABASE_URL=your_database_url
API_KEY=your_api_key
  1. configuration file containing environment variables.
  2. the environment variables
const databaseURL = process.env.DATABASE_URL;
const apiKey = process.env.API_KEY;
console.log(databaseURL, apiKey);

By doing this, you are setting up the environment variables for VS Code. Please note that these environment variables will only take effect in your VS Code editor, not the entire operating system. If you need to configure environment variables in the operating system, you will need to make specific settings based on the operating system you are using.

bannerAds