VSCode doesn't syntax highlight all .env files

Question

VSCode being strange about environment files. Even though it shows the correct file icon for the example.env as a dotenv file in the file view/tab, only .env is syntax-highlighted correctly when opening the file.

.env (correct):

example.env (no syntax highlighting):

What's the best way to get all .env files syntax highlighted properly in VSCode?

Answer 1

VS Code has a way to manually define the file association of certain extension types.

To do so for .env files:

1. Open Settings (Ctrl + , or File > Preferences > Settings.
2. Search for file asssociation.
3. You should see Files: Associations.
4. In the table under this setting, click on Add Item.
5. Under Item, add *.env and under Value, add properties.
6. Click on OK once you're done.

You can also do the same for .env.example files.

Switching back to your file, you should see the syntax highlighted.

Answer 2

I guess vscode env formetter extension is build to get highlights all files starting with ".env" not anything before the name in your case "example.env". I guess it is treating a separate language file which definations is not installed. If you want to have separate env for local and production you can name them as ".env.local" for local and ".env" for production. Vscode will hightlights syntax for these.

Answer 3

I use the extension DotENV. Works flawlessly for me.