Associate File Types in VS Code

#vue #vscode #javascript #webdev

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

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

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!