Better formatting for HTML tags with Vetur?

Question

I noticed that prettier is now used by Vetur to format the HTML part of Vue files. I don't always understand the way it is formatted:

<b-button v-else pill variant="primary" @click="submit"
  >Finish</b-button
>

If I add just one class element it goes:

<b-button
  v-else
  pill
  class="pb-2"
  variant="primary"
  @click="submit"
  >Finish</b-button
>

However, since my editor is more than 100 chars wide, it would make it legit to format it as:

<b-button v-else pill class="pb-2" variant="primary" @click="submit">
  Finish
</b-button>

I looked at the options of Prettier, but I didn't find any relevant configuration settings for this matter.

How can tell my vscode formatter to format HTML tags as wanted?

In my .prettierrc.json I have:

{
  "singleQuote": true,
  "arrowParens": "avoid",
  "jsxBracketSameLine": true
}

Answer 1

prettier offers you options for both:

• printWidth for the line length https://prettier.io/docs/en/options.html#print-width
• htmlWhitespaceSensitivity for handling of brackets https://prettier.io/docs/en/options.html#html-whitespace-sensitivity

To get your desired output, you would probably need:

{
  "printWidth": 100,
  "htmlWhitespaceSensitivity": "ignore"
}

By default the htmlWhitespaceSensivity is set to 'css', because:

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

1<b> 2 </b>3 => 1 2 3

1<b>2</b>3 => 123

This happens because whitespace is significant in inline elements.

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