How do I configure prettier to behave in a specific way for Vue.js template syntax?

Question

I want to customize a specific behavior in Prettier. I'm wondering if there's a quick way to implement below solution without having to write my own parser.

My .prettierrc.js:

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 (HTML) that I want to format:

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

Current outcome:

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

Desired outcome:

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

Is there a way to achieve above desired outcome?

Answer 1

You are probably looking for the HTML Whitespace Sensitivity Setting.

https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting:

As you may notice during daily HTML works, the following two cases won't produce the same output:

	html	output
with spaces	1<b> 2 </b>3	1 2 3
without spaces	1<b>2</b>3	123

For this reason, we cannot safely format

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>

into

<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
</a>

since it may modify the displayed output in the browser.

Instead of breaking your code or just doing nothing, we introduce whitespace-sensitive formatting, which:

• follows the default CSS display value for every element to identify if the whitespace inside it is significant,
• and wraps the tags in such a way as to avoid adding or removing significant whitespace.

I hope this helps :)