Scott Addie

Last Updated: 4/10/2016

No file extension?!? What now?

With the topic of JavaScript fatigue dwelling in the limelight as of late, one might wonder how editors such as Visual Studio (VS) Code are keeping abreast the churn. What’s the extended forecast for the JavaScript community this week, you ask? Confusing with a 90% chance of inexorable tooling showers. New Node.js-based tooling emerges in a drizzle-like fashion. If you aren’t keeping up with the small, incremental changes, it feels more like weathering a treacherous downpour of foreign concepts and tooling. Along with this tooling sprouts the need for new JavaScript “dot files” to satisfy tooling configuration.

Let’s look to the Babel transpiler as one of the more distinguished examples. Its convention for configuration is to use a JSON-based file named .babelrc. Whether you’re a JavaScript rookie or a 10-year veteran who slings JavaScript code 50 hours a week, this is intimidating. Is the file’s content expectation JSON, YAML, INI, or some other format? Help me!!! This is where a good editor can lend a hand. Luckily, VS Code offers bountiful flexibility in associating such file names with a language mode.

Setting File Language Expectations within VS Code

If you’ve been following VS Code closely, then you’re aware of a couple disparate download channels which are available. For those hoping to avoid surprises, there’s the Stable release channel; and, for those of us who enjoy tinkering on the bleeding edge, there’s the Insiders release channel. As announced at the Build 2016 conference by Wade Anderson, a Senior PM working on Microsoft’s VS Code team, the Insiders channel will update weekly with the latest bits. At the time of writing, only the Insiders channel release supports this file association mechanism (as of version 0.10.14). That’s soon to change.

So how does it work? Follow these steps:

1. Go to File -> Preferences -> Workspace Settings. Notice the creation of a .vscode folder at the project root. Within it, an empty settings.json file was created.
2. With the cursor placed inside of the Default Settings pane, open Command Palette (View -> Command Palette…) and type @files.associations. Note that the > character should be removed before typing this.
3. In the pane appearing to the right of the Default Settings pane (see screenshot below), hydrate the empty object literal with the desired file-to-language associations. Sticking with our .babelrc example, use this:

Now, verify that the changes were applied. Open the .babelrc file, and note the language indicated in the lower right-hand corner of the blue status bar. If “Plain Text” is listed instead of “JSON”, then type Reload Window in Command Palette to give the editor a nudge.

Taking it a Step Further with Global Settings

The walk-through above is not without its shortcomings. What if this configuration could be applied globally to any project on the development machine? Luckily, VS Code’s User Settings provide a vehicle for accomplishing exactly this. Simply go to File -> Preferences -> User Settings. Apply the same settings as described above in this settings.json file. Upon completion, this settings file will apply to any project work on this particular development machine. On a Windows machine with the Insiders release, this file can be found at %AppData%\Code – Insiders\User\settings.json.

Associating File Extensions with Language Modes

With the explosion of ECMAScript 6 / 2015, one practice I commonly see is the use of a “.es6” file extension. That file extension is already mapped to the JavaScript language mode in VS Code. What isn’t mapped is a “.es2015” file extension. While we’re at it, let’s map something similar for ECMAScript 2016. I can map this to the JavaScript language mode with the following settings.json entry:

Now let’s say you’re developing a new React JSX component and would prefer to use the “.js” file extension over the “.jsx” extension. To associate just those JSX components to the “JavaScript React” language mode, you’d have to leverage a naming convention with a file glob. For example:

Alternatively, you could choose to create a dedicated “components” folder to house those JSX components. In that case, the same language mode mapping could be achieved as follows:

Conclusion

We’ve only scratched the surface of what’s possible with file-to-language associations in VS Code. Recognize that it’s possible to use complex file glob patterns as the key in the key-value pair within the files.associations object literal to satisfy some very complex use cases. This is handy, for example, when you’d like to target all or maybe just a few file types within a folder. Whenever possible, move away from “Plain Text” language mode to something more appropriate for the file type. This allows the editor to provide assistance and to ultimately make you more productive. For more useful VS Code tips and tricks, I highly recommend watching Wade Anderson’s Build 2016 talk.