Make prettier less uglier - prevent split tags

Question

Prettier in VS Code is great, except in this case where it seems to make things less readable. Here's an example of prettier's wrapping behavior in a Vue template file:

Notice the opening tag's end bracket is placed as start of second line, and closing tag is split between end of line 2 and 3. In my mind, this is more pretty:

Now the tags are complete on their own lines and the content is alone on line 2.

I've been unable to find a way to configure this in the prettier docs. Any ninjas know how?

Answer 1

Try to set htmlWhitespaceSensitivity property to ignore in your prettier config.

Answer 2

I agree your opinion. This Linter rule will help you.

eslint-plugin-vue/html-closing-bracket-newline.md at master · vuejs/eslint-plugin-vue

I setting up rules in .eslintrc.js below.

"vue/html-closing-bracket-newline": [2, { multiline: "never" }]

and I setting up .vscode/setting.json below

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[vue]": {
    "editor.formatOnSave": false
  }
}