Last Updated: 4/10/2016
No file extension?!? What now?
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:
- 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.
- 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.
- 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
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:
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.