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?

Huy Duy · Accepted Answer

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

Ahmed Jaouadi · Answer

Read this
Set htmlWhitespaceSensitivity to ignore
In case of using react there is a jsxBracketSameLine property set it to true and you are good to go.
Just add to your custom config to your package json
Example:
"prettier": {
    "singleQuote": true,
    "jsxBracketSameLine": true,
    "printWidth": 80,
    "tabWidth": 2,
    "semi": true,
    "bracketSpacing": true,
    "jsxSingleQuote": false
  }

nabeen · Answer

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

Make prettier less uglier - prevent split tags

3 Answers

Add your own answers!

Ask a Question