VSCode language mode association for subfolders and special characters folders

Visual Studio Code (VSCode) has tons of file format supported. Based on the filename and extension, VSCode finds language mode. Often, provided sensible defaults are okay. But what if you want different language mode for different folders?

VSCode has in its .vscode/settings.json file a files.associations object. It's a map of glob pattern to language mode. See supported glob pattern syntax in VSCode docs.

How to change language mode for all files anywhere

The simplest variant. All files need different language mode.

For example, when styling with Tailwind CSS and you install Tailwind CSS extension for VSCode, you want to change all *.css files to tailwindcss mode instead of plain css.

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
  ...
}

How to change language mode for specific paths

It's also not uncommon, that files under certain subfolder needs different language mode.

For example, when theming Sphinx documentation, you create a lot of HTML files which are not pure HTML, but Jinja HTML. I install Better Jinja extension which provides jinja-html mode.

However, the path relative to workspace will not work:

"source/_templates/*.html": "jinja-html``

It's because when a path separator (/) appears in a glob pattern, VSCode interpret it as absolute path.

"/Users/liborjelinek/git-dm-oss/sphinx-themes/sphinx_*_theme/src/sphinx_*_theme/styles/input.css": "tailwindcss",

Mmm very impractical. Trick here is to place ** at the very beginning. Two asterisk means any path, including none. Fixed:

"**/source/_templates/*.html": "jinja-html``

Being creative with ** is beneficial. E.g., to associate all *.html anywhere but only under certain path? Use ** again:

{
  "files.associations": {
    "*.css": "tailwindcss",
    "**/source/_templates/**/*.html": "jinja-html`
  }
  ...
}

How to escape special characters for language mode files.associations?

Now the tricky part which I found during preparing starter template new Sphinx Themes based on Cookiecutter template generator.

Cookiecutter projects uses folder named {{ cookiecutter.project_slug }}. Only under it, I want to change association, e.g. for *.py from py to jinja-py.

Escaping glob pattern special characters (like *, {, etc.) isn't described in the VSCode docs, but it's possible.

Firstly, these will NOT work:

• "**/{{ cookiecutter.project_slug }}/**/*.py": "jinja-py" because { and } are glob pattern's grouping characters.
• "**/{{{{ cookiecutter.project_slug }}}}/**/*.py": "jinja-py" because doubling to escape isn't VSCode glob pattern escaping mechanism
• **/\{\{ cookiecutter.project_slug \}\}/**/*.py": "jinja-py" because for backslash escape, the \ is escape character but to JSON itself (for example, \n).

The escape the backslash will do the trick ("**/\\{\\{ cookiecutter.project_slug \\}\\}/**/*.css": "tailwindcss"). For example:

{
  "files.associations": {
    // CSS files are Tailwind
    "**/\\{\\{ cookiecutter.project_slug \\}\\}/**/*.css": "tailwindcss",
    // HTML files are Jinja
    "**/\\{\\{ cookiecutter.project_slug \\}\\}/**/*.html": "jinja-html",
    "**/\\{\\{ cookiecutter.project_slug \\}\\}/**/*.py": "jinja-py",
    "**/\\{\\{ cookiecutter.project_slug \\}\\}/**/*.toml": "jinja-toml",
    "**/\\{\\{ cookiecutter.project_slug \\}\\}/**/*.json": "jinja-json"
  },
  ...
}