Visual Studio Code (VSCode) is a powerful code editor, but occasionally, it may provide different functionality than you need out of the box. Just have a look at the open feature requests on Github, and you’ll see that many users have encountered situations where VSCode doesn’t deliver as expected.
One such scenario is the lack of support for custom file type handlers for subfolders within VSCode projects. Imagine you have a GoHugo-project with a subfolder named
layouts, and you want all the files in that folder to open with a specific editor, not the default one. A sample would be the
gojson editor for JSON
layout files and
package.json files for NPM packages.
In a nutshell, here’s what I tried to achieve:
- Open all JSON files in a specific folder, let’s call it
layouts, with a custom editor for
- Keep the default JSON editor for all other JSON files within the project, like npm, eslint, other configurations, etc.
This requirement is because the
gojson JSON editor serves a specialized purpose - it’s essentially a template engine, not a conventional JSON editor. It doesn’t display JSON errors, making it ideal for GoHugo, but errors in other JSON files will evade your attention until things fail.
Let’s assume you have a folder structure like this:
theme/.vscode folder was created after the first attempt.
Attempt 1: Configuration with globs
Initially, one might think that the
file.associations configuration in VSCode can handle globs. So, I tried configuring it like this in
However, I quickly discovered that VSCode ignores these settings. It turns out that the
file.associations configuration object supports global file extensions (like `*.ext) but not globs. Sadly.
Attempt 2: Configuration in per folder
Another attempt was to add the
file.associations configuration object to the
.vscode/settings.json file within the
layouts folder. Unfortunately, this approach is also ineffective, as VSCode does not parse these folder-specific settings. It only recognizes the workspace settings and specific settings in the
.vscode-folder in the root folder. The workspace file overrides the
.vscode-folder settings in many cases. So, this approach is also a dead-end.
The solution: Adding the subfolder to the workspace file
After some trial and error, a peculiar but functional hack emerged as the solution: Adding the folder as a second root folder to the workspace. This finally worked to set the editor for separate folders in this project. All files within it will automatically open with the designated editor.
The final workspace file with the above configuration looks like this:
It took a while, but finally, I can open my GoHugo project in VSCode and have the proper editor open any file in my project. This is not limited to GoHugo projects and JSON files but can be used for any project with a similar requirement.
This post is part of #100DaysToOffload 48 posts since Dec 04, 2022 — 85 total posts