DEV Community

Cover image for VSCode language mode association for subfolders and special characters folders
Libor Jelinek
Libor Jelinek

Posted on

VSCode language mode association for subfolders and special characters folders

Visual Studio Code (VSCode) has a 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"
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

How to change language mode for 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.

"source/_templates/*.html": "jinja-html``
Enter fullscreen mode Exit fullscreen mode

Safer is use ** meaning anywhere - at the path or any subpath.

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

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"
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
philip_zhang_854092d88473 profile image
Philip

I really enjoy reading your blog and your unique perspective! On a related note, I've been using EchoAPI in VS Code, and it’s been a game-changer for my API testing workflow.