Force Prettier to place inner text on new line without trailing >

Question

I am using VScode for Vue development using Prettier and Eslint.

Currently, Prettier is formatting my code like this:

What I'd like is to force the following

If I manually change it to my wanted format it won't mark it as incorrect, but it also doesn't do this format by default.

Is there a way to accomplish this by default?

My relevant VScode Settings.json

"prettier.disableLanguages": ["json"],
  "[scss, css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "html.format.wrapAttributes": "force-aligned",
  "sync.gist": "30b867ce7d7d1360ee7bad0cf5599fc3",
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceUpload": false,
  "sync.removeExtensions": false,
  "sync.quietSync": true,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

My .prettierrc settings

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

My eslintrc.js settings

extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', 'prettier'],

I have the same problem with a similar configuration. Have you found any solution yet? — JSONaLeo, Apr 01 '21 at 18:18
I gave up on it at the time, but recently came across this. Perhaps it will be of use: https://stackoverflow.com/questions/61715509/how-to-resolve-eslintvue-html-closing-bracket-newline-conflict — Tim Titus, Apr 02 '21 at 03:43

score 6 · Accepted Answer · answered Jul 22 '21 at 13:31

6

Adding this to the .prettierrc or .prettierrc.json file seems to fix this kind of issue:

"htmlWhitespaceSensitivity": "ignore"

Yours would look like this:

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "ignore"
}

To understand better if this is a good solution for you, you can read about this topic: Whitespace-sensitive formatting

answered Jul 22 '21 at 13:31

Sam S

168
2
8

This has indeed solved the issue! Many thanks! – Tim Titus Jan 23 '22 at 06:17

score 0 · Answer 2 · answered May 24 '20 at 04:34

0

Need to modify the printwidth option in the prettier, but you need to aware of the below thing

There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which Prettier doesn’t do). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation :) - prettier

answered May 24 '20 at 04:34

Vickey

365
1
3
17

Hmm.. this isn't a wrapping issue, it's a formatting issue. I'm not sure this helps. – Tim Titus May 25 '20 at 05:59

Force Prettier to place inner text on new line without trailing >

2 Answers2