Why is prettier making my Handlebars HTML double quotes into single quotes?

Question

I have a Vue project with a .prettierc.js file that looks like this

module.exports = {
  semi: false,
  arrowParens: 'always',
  singleQuote: true,
  trailingComma: 'es5',
}

So far this has worked as expected, favoring single quotes in JavaScript and TypeScript portions of the code and favoring double quotes in HTML and .vue component files.

However, I need handlebars for some templated HTML so I added the .hbs file. When I ran my formatting step, Prettier converted all the double quotes to single quotes in the .hbs file. Renaming the file to .html prevents this from happening, but isn't an ideal solution.

How can I get prettier to treat .hbs files like .html files and favor double quotes?

Answer 1

Prettier doesn't recognize .hbs files by default, so it doesn't make an exception to it's configured quoting rule.

Instead, the overrides config attribute can be used to define rule exceptions based on file name/extension.

module.exports = {
  semi: false,
  arrowParens: 'always',
  singleQuote: true,
  trailingComma: 'es5',

  overrides: [
    {
      files: '*.hbs',
      options: {
        singleQuote: false,
      },
    },
  ],
}