VSCODE not recognizing .env* files for markup porpuses and not recognizing .env.local.* files

Question

Environment:

NextJs, React, VsCode

Syntax highlights not being recognized by VSCODE.

I have installed the following extensions:

ENV
DotEnv

Have done the followin on my json config file:

"files.associations": {
            "*.js": "javascriptreact",
            "*.env.development": "env",
            "*.env.production": "env",
            "*.env.local": "env",
    },

VsCode should recognize .env naming as per the file I have created:

.env.local.example

I have tested a public variable NEXT_PUBLIC_ENV_LOCAL_VARIABLE = "Some public stuff" and it does not work when I test it on the browser. When I add the termination .example to .env.local file, Vscode stops recognizing the file at all.

Thanks for the help

user_2774121 · Answer

Your configs glob patterns seem to be the problem.

*.env.local covers example.env.local and not .env.local.example. If you append identifiers to the end of the filename your config should be like this:

"files.associations": {
            "*.js": "javascriptreact",
            ".env.development.*": "env",
            ".env.production.*": "env",
            ".env.local.*": "env",
    },

Or even this would be sufficient I think:

"files.associations": {
            "*.js": "javascriptreact",
            ".env.*": "env",
    },

user_8526223 · Answer

create-next-app supports only the following variable names: https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables

You overriding VSCode highlight config will not make a difference how your project exposes environment variables to the browser. You will need to override the create-next-app configuration or use the supported naming convention.

VSCODE not recognizing .env* files for markup porpuses and not recognizing .env.local.* files

2 Answers