{"id":17779,"date":"2024-03-15T15:42:00","date_gmt":"2024-03-15T15:42:00","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/"},"modified":"2024-03-21T11:43:27","modified_gmt":"2024-03-21T11:43:27","slug":"how-can-you-set-up-environment-variables-in-vscode","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/","title":{"rendered":"How can you set up environment variables in vscode?"},"content":{"rendered":"

To set up the environment variables for VS Code, follow these steps:<\/p>\n

    \n
  1. Open VS Code and go to the “Extensions” panel, search for and install an extension called “DotENV”.<\/li>\n
  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”.<\/li>\n
  3. configuration file<\/li>\n<\/ol>\n
    \"editor.tokenColorCustomizations\"<\/span>:<\/span> {<\/span>\r\n    \"textMateRules\"<\/span>:<\/span> [<\/span>\r\n        {<\/span>\r\n            \"scope\"<\/span>:<\/span> \"support.variable.env\"<\/span>,<\/span>\r\n            \"settings\"<\/span>:<\/span> {<\/span>\r\n                \"foreground\"<\/span>:<\/span> \"#FFA500\"<\/span>\r\n            }<\/span>\r\n        }<\/span>\r\n    ]<\/span>\r\n}<\/span>,<\/span>\r\n<\/code><\/pre>\n
    This code will add orange text color to the environment variables.
    \n4. Save and close the settings.json file.
    \n5. 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.
    \n6. Open the .env file and add the environment variables you need, one variable per line, for example:<\/p>\n
    DATABASE_URL=your_database_url\r\nAPI_KEY=your_api_key\r\n<\/code><\/pre>\n
      \n
    1. configuration file containing environment variables.<\/li>\n
    2. the environment variables<\/li>\n<\/ol>\n
      const<\/span> databaseURL = process.env<\/span>.DATABASE_URL<\/span>;\r\nconst<\/span> apiKey = process.env<\/span>.API_KEY<\/span>;\r\nconsole<\/span>.log<\/span>(databaseURL, apiKey);\r\n<\/code><\/pre>\n
      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.<\/p>\n","protected":false},"excerpt":{"rendered":"
      To set up the environment variables for VS Code, follow these steps: Open VS Code and go to the “Extensions” panel, search for and install an extension called “DotENV”. In the menu bar of VS Code, select “File” -> “Preferences” -> “Settings”, then in the settings panel on the right side, locate “Editor” -> “Customize […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17779","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow can you set up environment variables in vscode? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can you set up environment variables in vscode?\" \/>\n<meta property=\"og:description\" content=\"To set up the environment variables for VS Code, follow these steps: Open VS Code and go to the “Extensions” panel, search for and install an extension called “DotENV”. In the menu bar of VS Code, select “File” -> “Preferences” -> “Settings”, then in the settings panel on the right side, locate “Editor” -> “Customize […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:42:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:43:27+00:00\" \/>\n<meta name=\"author\" content=\"Olivia Parker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"How can you set up environment variables in vscode?\",\"datePublished\":\"2024-03-15T15:42:00+00:00\",\"dateModified\":\"2024-03-21T11:43:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\"},\"wordCount\":201,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\",\"name\":\"How can you set up environment variables in vscode? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:42:00+00:00\",\"dateModified\":\"2024-03-21T11:43:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can you set up environment variables in vscode?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\",\"name\":\"Olivia Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"caption\":\"Olivia Parker\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can you set up environment variables in vscode? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/","og_locale":"en_US","og_type":"article","og_title":"How can you set up environment variables in vscode?","og_description":"To set up the environment variables for VS Code, follow these steps: Open VS Code and go to the “Extensions” panel, search for and install an extension called “DotENV”. In the menu bar of VS Code, select “File” -> “Preferences” -> “Settings”, then in the settings panel on the right side, locate “Editor” -> “Customize […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:42:00+00:00","article_modified_time":"2024-03-21T11:43:27+00:00","author":"Olivia Parker","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Olivia Parker","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"How can you set up environment variables in vscode?","datePublished":"2024-03-15T15:42:00+00:00","dateModified":"2024-03-21T11:43:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/"},"wordCount":201,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/","name":"How can you set up environment variables in vscode? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:42:00+00:00","dateModified":"2024-03-21T11:43:27+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-set-up-environment-variables-in-vscode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can you set up environment variables in vscode?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9","name":"Olivia Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","caption":"Olivia Parker"},"url":"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17779"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17779\/revisions"}],"predecessor-version":[{"id":51413,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17779\/revisions\/51413"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}