DEV Community

Cover image for Associate File Types in VS Code
John Papa for Microsoft Azure

Posted on • Originally published at Medium on

Associate File Types in VS Code

I love a good editor. All of the great tooling, intellisense, auto-complete and all of the goodness and efficiency. Intelligent tooling is a huge part of what makes our day fun. Don’t you agree?

For example, when I open Visual Studio Code (aka VS Code) and it recognizes the file type I am editing, it lights up all of the relevant tooling features. Typescript, JavaScript, docker files, Vue files … it all works great! Sometimes we have to load an extension to make some of these light up (e.g. Vue files with the Vetur extension).

So you can understand it makes me sad when I open a file and I get zero help from the tool. No color coding of keywords, no formatting, no intellisense, nothing! This rarely happens, but when it does, there is an easy fix. One case is the .vuerc file.

Associate Files by Type, in Visual Studio Code
Associate Files by Type, in Visual Studio Code

Associate Files

Here is an example. When coding with Vue, sometimes we want to view or edit the .vuerc file. This is where Vue stores all of the Vue CLI presets that we save. If we open the file (stored on my computer at ~/.vuerc) in VS Code we see a file with no special tooling help. VS Code cannot by default determine what to do with this dot file.

Fortunately, there is an easy solution. Open your settings (CMD + , on a Mac or CTRL + , on Windows) and enter a file association. We can do this with the settings UI or the settings JSON, both are options to edit your settings.

Then enter a file association for the .vuerc file so VS Code knows it should contain JSON.



"files.associations": {
 ".vuerc": "json"
}


Enter fullscreen mode Exit fullscreen mode

The code above associates this one file with JSON. We can also add pattern matching if we want to associate all files that match a specific naming pattern.

You can learn more about the language identifier feature from this link in the VS Code docs.

Now we know how to get great tooling features for all of our files!

VS Code

Top comments (4)

Collapse
 
dance2die profile image
Sung M. Kim

Thanks for the post, John.

May I request to update the gif for "Associate Files by Type, in Visual Studio Code", which seems to be missing.

missing file

Collapse
 
john_papa profile image
John Papa • Edited

Hmmm seems it isn't showing. I will ask the admins for help

UPDATE: I fixed it. Thanks for your patience.

Collapse
 
dance2die profile image
Sung M. Kim

Thank you 🀜

Collapse
 
thehanna profile image
Brian Hanna

Just ran into this problem the other day with Azure's settings.job files! Thanks for the tip