CODEWITHSUNDEEP
vue.jsvisual-studio-codeprettier
Noah Stahl
Noah Stahl

Reputation: 7553

Make prettier less uglier - prevent split tags

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:

enter image description here

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:

enter image description here

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?

Upvotes: 30

Views: 7286

Answers (2)

Huy Duy
Huy Duy

Reputation: 852

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

Upvotes: 40

nabeen
nabeen

Reputation: 462

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
  }
}

Upvotes: 1

Related Questions