CODEWITHSUNDEEP
visual-studio-codeenvironment-variablesfile-typefile-associationdotenv
cbdeveloper
cbdeveloper

Reputation: 31365

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

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

And VSCode is not recognizing it as a dotenv file.

enter image description here

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.

enter image description here

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?

Upvotes: 15

Views: 11755

Answers (3)

Parker
Parker

Reputation: 520

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"
}

Upvotes: 29

Clintm
Clintm

Reputation: 4877

With the dotenv extension this works:

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

Upvotes: 10

GorvGoyl
GorvGoyl

Reputation: 49230

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"
  }

enter image description here

Upvotes: 7

Related Questions