DEV Community

Cover image for Typing process.env automatically with this VSC extension
Yassin Eldeeb
Yassin Eldeeb

Posted on • Updated on

Typing process.env automatically with this VSC extension

what's up typescript enthusiasts 👋
tired from writing types for your env variables to get a type-safe version of process.env as seen in this tutorial?

Setup

1- Install @types/node in your project

$ yarn add @types/node -D

// or using npm

$ npm i @types/node -D
Enter fullscreen mode Exit fullscreen mode

2- First of all, download the VSC extension TS Env Typings

3- Specify env-typings.json file in the root of your project.

config JSON file in the root directory

4- Add path field to your development .env file
JSON config file
and yep! you even have auto-completion in this JSON config too 😎

That's it, Enjoy!

Cool Features 🆒

1- Specify path for the generated output using output field in the JSON config.
output option in config file

2- Auto detect env variable type so that It can give you a nice example in the intellisense on how to use and parse it.

so as an example if you've a number env variable It'll tell you to use parseInt to parse it before using it cause env variables are always read as strings.
example in the intellisense on every env variable

3- Variants for an env variable, so you tell the extension what are the possible values for an env variable so It can generate better types for it and recommend you a nicer example to use
variants for an env variable

How to specify Variants in .env file?

  • add a comment at the end of the env line that includes "# variants:"

  • specify the different variants for your variable seperated by a "|" like you would in typscript

  • quotes are optional around the variants values

Specify Variants in .env file

That's it.

If you liked the extension, please give it a star here 🌟

Hope you've a great day, curios to see your feedback 🤗

Discussion (0)