ENV Viewer

Interactive view for environment variables files
Visual studio market place

Report Bug • Request Feature

 

About The Project

This extension allows you to change environment variables with a handy interface. You can easily search for variables, change their values by hand or leave default values to select.

I couldn't find a better way to organize environment variables. Even separating the variables with comments or also explaining with comments too, it never got better.

With this extension you will not have to rembember what values should be changed or what values that variable can take in order to get the desired result.

 

Usage

Go to your .env file and click on the magnifying glass icon at the top right menu.

ℹ️ You must use at least env-template tag to let the extension know where values will be overwritten.

 

There is three tags that can be used while writting out .env file:

Env Template Tag:

---

This tag is meant to mark the values that will take effect over our application.

ℹ️ They should be written without any comments or spaces between since all those values can be overwritten by the user.

 

Code shown in the example:

// @env-template
ENV=test
SITE_URL=www.test.com
ENV_VIEWER_REPO=test
KEY=secret_key_123

 

Env Value Tag:

---

This tag is meant to mark the values that a environment variable can take.

ℹ️ They should be written without any comments or spaces between.

 

Code shown in the example:

// @env-template
ENV=test
SITE_URL=www.test.com
ENV_VIEWER_REPO=test
KEY=secret_key_123

// @env-value:ENV
//    test,prod

 

Env Value tags also has types that can be specified. If you do not specify "select" is the default type.

 

Boolean:

Boolean inputs allows you to choose between two different values. The first value you set will be the value who represents the "true" value.

// @env-template
ENV=test
SITE_URL=www.test.com
ENV_VIEWER_REPO=test
KEY=secret_key_123
SHOW_INFO=true
CODE=3212

// @env-value:ENV
//    test,prod

// @env-value:SHOW_INFO(boolean)
//    true,false

 

Number:

Number inputs allows you to write only numbers. It doesn't requires for values to show.

// @env-template
ENV=test
SITE_URL=www.test.com
ENV_VIEWER_REPO=test
KEY=secret_key_123
SHOW_INFO=true
CODE=3212

// @env-value:ENV
//    test,prod

// @env-value:SHOW_INFO(boolean)
//    true,false

// @env-value:CODE(number)

 

You can also can set env keys with the same values if you specify them inside parentesis and between comas.

// @env-template
ENV=test
SITE_URL=www.test.com
ENV_VIEWER_REPO=test
KEY=secret_key_123

// @env-value:(ENV,SITE_URL)
//    test,prod

If you need to specify input type, you can do it as you did before

// @env-value:(SHOW_INFO,SHOW_STUFF)(boolean)
//    true,false

 

Env Mode Tag:

---

This tag is meant to mark a set of values that you can choose when should apply.

 

Code shown in the example:

// @env-template
ENV=prod
SITE_URL=www.prod.com
ENV_VIEWER_REPO=prod
KEY=secret_key_123

// @env-value:ENV
//    test,prod

// @env-mode:ENVIRONMENT.test
//    ENV=test
//    SITE_URL=www.test.com
//    ENV_VIEWER_REPO=test

// @env-mode:ENVIRONMENT.prod
//    ENV=prod
//    SITE_URL=www.prod.com
//    ENV_VIEWER_REPO=prod

 

License

MIT © Luis Olmedo

Distributed under the License. See LICENSE for more information.

 

Contact

Luis Olmedo - olmedoluis012@gmail.com

Project Link: https://github.com/olmedoluis/vscode-env-viewer