Multiple prettier config in one project in VSC

Question

I have a project where I have tests and src of my code. I wish to use different prettier configs for tests and application sources, so VSC would do the formatting according to the folder i'm in. Is this possible ?

Currently it's doesn't work for me, so maybe I'm doing something wrong.

I have separate .prettierrc in my main folder and in my tests folder e.g

root/
 --tests/
 ----.prettierrc <-- one for tests
 --.prettierrc <-- one for the rest

Answer 1

This is Configuration Overrides.

Example:

Root/
├── tests/
│   └── test.js
├── src/
│   └── app.js
├── index.js
└── .prettierrc

// .prettierrc
{
  "tabWidth": 2,
  "overrides": [
    {
      "files": ["src/**/*.js"],
      "options": {
        "singleQuote": true,
        "tabWidth": 8
      }
    },
    {
      "files": "tests/*.js",
      "options": {
        "singleQuote": false,
        "tabWidth": 16
      }
    }
  ]
}

Result:

// index.js:
if (true) {
  console.log("Hello");
}

// app.js
if (true) {
        console.log('Hello');
}


// test.js:
if (true) {
                console.log("Hello");
}

Answer 2

It doesn't work for me either. But if you know the directory structure, you can just specify each folder/file in your top-level (and only) .prettierrc file.

{
    "trailingComma": "none",
    "overrides": [
        {
            "files": "*.html",
            "options": { 
                "parser": "html", 
                "useTabs": false 
            }
        },
        {
            "files": "folder1/*.html",
            "options": {
                "parser": "html",
                "tabWidth": 2,
                "useTabs": true
            }
        }
    ],
    "plugins": ["@prettier/plugin-xml"],
    "$schema": "https://json.schemastore.org/prettierrc"
}

That's an excerpt of my config file, but it should give you the gist. It lets you override at a granular level, so all your html files will not use tabs, except those in folder1.