How to create custom file type handlers for individual folders in VSCode projects

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.

The Challenge

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 gojson files.
• 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:

 1├── .vscode
 2│   └── settings.json
 3├── ...
 4├── theme
 5│   ├── .vscode
 6│   │   ├── settings.json
 7│   ├── layouts
 8│   │   ├── ...
 9│   └── ...
10└── project.workspace

The 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 project.workspace or .vscode/settings.json:

1{
2  "files.associations": {
3    "**/layouts/**.html": "gohtml",
4    "**/layouts/**.xml": "goxml",
5    "**/layouts/**.json": "gojson",
6    "**/layouts/**.txt": "gotemplate",
7  }
8}

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:

 1{
 2  "folders": [
 3    {
 4      "path": "."
 5    },
 6    {
 7      "path": "layouts/"
 8    }
 9  ]
10}

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.