为什么 prettier 将我的 Handlebars HTML 双引号变成了单引号？

Question

我有一个 Vue 项目，其中的 .prettierc.js 文件看起来像这样

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

到目前为止，这已按预期工作，在代码的 JavaScript 和 TypeScript 部分支持单引号，在 HTML 和 .vue 组件文件中支持双引号。

但是，我需要一些模板 HTML 的车把，所以我添加了 .hbs 文件。当我运行我的格式化步骤时，Prettier 将 .hbs 文件中的所有双引号转换为单引号。将文件重命名为 .html 可以防止这种情况发生，但这不是一个理想的解决方案。

我怎样才能更漂亮地像对待 .html 文件一样对待 .hbs 文件并支持双引号？

Answer 1

Prettier 默认不识别 .hbs 个文件，因此它不会对其配置的引用规则进行例外处理。

相反，overrides 配置属性可用于根据文件 name/extension.

定义规则例外

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

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

为什么 prettier 将我的 Handlebars HTML 双引号变成了单引号？

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

handlebars.js

lint

prettier