Quick tip: Set folder-based file associations in Visual Studio Code / Marijke Luttekes

Visual Studio Code (VSCode) adds language-specific features to files based on the file extension and provides sensible defaults. But what if your project uses different language modes per extension, depending on the framework used? Enter folder-based file associations.

How to change file associations

While you can set file associations in your global user settings, you can also declare them per project.

We will use the file .vscode/settings.json in the project root to add local, project-specific VS code configuration. You can safely create the file if it doesn’t exist yet.

Note: Ensure the .vscode directory is in your project’s .gitignore!

I use the django-html language (part of the Django extension) for HTML templates in Django projects but don’t want to use it for any other type of project. This is how you could achieve such a setup:

{
  "files.associations": {
    "*.html": "django-html",
  }
}

You could also take it a step further and only apply the associations to specific directories:

{
  "files.associations": {
    "*.html": "html",
    "**/src/**/*.html": "django-html",
    "**/src/path-to-mail-templates/*.txt": "django-txt"
  }
}

Note that the first HTML association is superfluous here, as html is typically the default language for *.html files.

You can also use this syntax in your global user settings, which can be helpful if all your projects use the same directory structure.

And there you go, no more manual workspace switching necessary!

How to change file associations

See also