Typing process.env automatically with this VSC extension

Typing process.env automatically with this VSC extension

ยท

2 min read

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

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.

Hope you've a great day, curios to see your feedback ๐Ÿค—

ย