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?
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
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.
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.
Now we know how to get great tooling features for all of our files!