如何配置Prettier实现Vue.js模板的特定格式化效果？

问题说明 #

我想自定义Prettier的Vue模板格式化行为，不想编写自定义解析器。当前配置下，带多属性的<a>标签格式化后，文本和标签首尾挤在一起，希望实现文本单独换行缩进的效果。

当前Prettier配置 #

module.exports = {
   $schema: 'https://json.schemastore.org/prettierrc',
   semi: true,
   tabWidth: 3,
   singleQuote: true,
   printWidth: 100,
   trailingComma: 'es5',
   bracketSpacing: true,
   bracketSameLine: false,
   arrowParens: 'always',
   vueIndentScriptAndStyle: false,
   singleAttributePerLine: true,
};

待格式化的Vue模板代码 #

<template>
   <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a>
</template>

当前格式化结果 #

<template>
   <a
      href="https://vitejs.dev/"
      target="_blank"
      rel="noopener"
      >Vite</a
   >
</template>

期望的格式化结果 #

<template>
   <a
      href="https://vitejs.dev/"
      target="_blank"
      rel="noopener"
   >
      Vite
   </a>
</template>

解决方案 #

Prettier官方没有提供直接控制该行为的配置项，但可以通过两种无需编写自定义解析器的方式实现：

方法1：调整空白敏感性配置并手动初始化结构 #

1. 在Prettier配置中添加htmlWhitespaceSensitivity: 'strict'，让Prettier严格保留手动设置的空白：

module.exports = {
   $schema: 'https://json.schemastore.org/prettierrc',
   semi: true,
   tabWidth: 3,
   singleQuote: true,
   printWidth: 100,
   trailingComma: 'es5',
   bracketSpacing: true,
   bracketSameLine: false,
   arrowParens: 'always',
   vueIndentScriptAndStyle: false,
   singleAttributePerLine: true,
   htmlWhitespaceSensitivity: 'strict' // 新增配置
};

2. 手动将模板中的文本内容提前换行并缩进：

<template>
   <a href="https://vitejs.dev/" target="_blank" rel="noopener">
      Vite
   </a>
</template>

之后运行Prettier格式化时，会自动保留这个结构，输出你期望的结果。

方法2：使用第三方Prettier插件 #

可以使用针对Vue模板优化的第三方插件（比如prettier-plugin-vue-indent），这类插件能自定义Vue模板的换行和缩进规则，无需自行编写解析器。安装插件后，按照插件文档配置启用即可实现目标效果。

内容的提问来源于stack exchange，提问作者passionateLearner