Notion app logo
Struggling to stay organized and effective? Learn to master your time and tasks with the Effectively Notion course!

Apply Language Modes to Files With Non-Standard Filenames in VS Code

Learn how to setup syntax highlighting and other language modes with file associations

2019-02-13

Have you ever opened a file in VS Code that doesn't have a standard language extension or filename and noticed that the syntax highlighting and other language mode features is missing?

As a trivial example, you might have a Brewfile and want it to have syntax highlighting. Despite being Ruby, without a .rb extension syntax highlighting won't be applied because VS Code doesn't have a way to determine the Brewfile is Ruby. Another example is an AlfredApp Theme file, it has the naming convention of *.alfredappearance but is JSON, so syntax highligthing won't be applied to this file either.

VS Code makes it easy to associate a file with a language mode by adding files.associations to your settings.json. To demonstrate, here's what a configuration for the above examples would look like:

{
  "files.associations": {
    "Brewfile": "ruby",
    "*.alfredappearance": "json"
  }
}

files.associations is an object where each key is a filename or a pattern (glob) of the filename with the value set to the language mode that it represents.

Now whenever you open a Brewfile or an Alfred theme that ends in .alfredappearance, the file will get the correct syntax highlighting and all the features that are available to the language mode!

In the examples I've given for files.associations, syntax highlighting was the only feature highlighted, but setting a file to a language mode gives it access to any functionality that's associated with that language.

Gif of adding Syntax Highlighting to Files Without Extensions in VS Code

Photo of Chase Adams

Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.

Freebies

Vector Arrow Scribbles
banner image for figma vector arrows scribbles

A figma community project of vectorized hand-drawn arrows.

Go To Figma
Vector Line Scribbles
banner for figma vector line scribbles

A figma community project of vectorized hand-drawn lines.

Go To Figma
Vector Shape Scribbles
banner image of figma vector shapes scribbles

A figma community project of vectorized hand-drawn shapes.

Go To Figma

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

Online

I'm on almost all social media as @curiouslychase.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.