How to set file association to custom .env filename in VSCode settings?

Question

I have a .envDEV file name that I use for development environment variables.

And VSCode is not recognizing it as a dotenv file.

If I change the language mode for the file, it seems to work (the proper styles are applied, 'though the icon won't change). But it goes away whenever I close and re-open the file.

I'm trying to set a custom file association for this, but without success so far.

seetings.json

"files.associations": {
  "*.envDEV": "dotenv"      // DOES NOT WORK
  "*.envDEV": ".env"        // DOES NOT WORK
},

Does anybody know how to do this?

Parker · Answer 1 · 2023-05-15T21:21:12.463

22

By default .env files have a language id of plaintext, but vscode does something special with it to assign a different icon. The only way I've been able to accomplish what you're asking for is with an icons extension.

The dotenv extension adds syntax highlighting and the dotenv language id to all your .env variant files. Pair that with the vscode-icons extensions, and it changes the icon to the gear that the basic .env file has.

With just the icons extension, you can use the properties file association and that works as well, just add the following to settings.json:

"files.associations": {
  ".env*": "properties"
}

edited May 15 '23 at 21:21

answered Feb 26 '20 at 18:02

Parker

440
3
6

I will try that! Thank you! – cbdeveloper Feb 26 '20 at 18:15
2

It's worth noting that a dotenv file is not a properties file. https://en.wikipedia.org/wiki/.properties – Clintm May 30 '22 at 15:21

Clintm · Answer 2 · 2022-05-24T15:04:52.673

7

With the dotenv extension this works:

"files.associations": {
  "*.env*": "dotenv"      // THIS WORKS NOW
}

edited May 24 '22 at 15:04

answered Feb 15 '21 at 04:39

Clintm

4,505
3
41
54

Just what i needed! thanks! – TrieuNomad Feb 11 '22 at 16:47
This did not work. "dotenv" is not a built in type, "properties" is. – Michael Ozeryansky May 22 '22 at 07:22
@MichaelOzeryansky you'll need a dotenv plugin installed – Clintm May 23 '22 at 17:41
@MichaelOzeryansky mentioned and a `dotenv` file is not a `properties` file: https://en.wikipedia.org/wiki/.properties – Clintm May 24 '22 at 15:05
This does not enable the syntax highlighting for me. It only changed the icons. but "properties" does. It both applies syntax highlighting and icon change. – Halil Kayer Mar 09 '23 at 13:41
With "Dotenv Official + Vault", this doesn't work, at least not for me. By don't work I mean it seems to have syntax highlighting, but the cloaking part of the secrets does not get activated. – Mihai Ungureanu Mar 21 '23 at 09:58

score 6 · Answer 3 · edited Feb 19 '22 at 21:30

6

If you don't want to install a separate extension you can set language mod for .env file as makefile or python to get syntax highlighting and # comment support.

"files.associations": {
    ".env*": "makefile"  // or "python"
  }

edited Feb 19 '22 at 21:30

Robin Wieruch

14,900
10
82
107

answered May 22 '20 at 23:08

GorvGoyl

42,508
29
229
225

3

This might technically work for highlighting but `make` is weird... not sure I would recommend doing this. (i.e. $ in a makefile is special) – Clintm Feb 15 '21 at 04:31

How to set file association to custom .env filename in VSCode settings?

3 Answers3