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"
}
...
}
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``
Safer is use **
meaning anywhere - at the path or any subpath.
{
"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"
},
...
}
Top comments (1)
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.