How can I set up Prettier in VSCode settings to conditionally apply single quotes by file type?

Question

I'm trying to set up Prettier in VSCode settings so that for all file types except JS it will default to double quotes.

I've disabled ESLint to make sure it's not the problem. I've also check Prettier documentation on configuration overrides in JSON. But my settings don't seem to work.

  "prettier": {
    "singleQuote": false,
    "overrides": [
      {
        "files": "*.js",
        "options": {
          "singleQuote": true
        }
      }
    ]
  }

When I save a CSS file I expect to see double quotes and I do. When I save a JS file I expect to see single quotes (when there's no apostrophes used in the string) but it sets double quotes on all strings.

Answer 1

To use single quotes for JavaScript but double quotes for CSS, SCSS, and HTML, in your project root directory, add a .prettierrc file with this JSON:

{
  "singleQuote": true,
  "overrides": [
    {
      "files": ["**/*.css", "**/*.scss", "**/*.html"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

(Bonus info: The ** is a glob character and represents any number of subfolders within the current folder.)