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
I gave up on it at the time, but recently came across this. Perhaps it will be of use: stackoverflow.com/questions/61715509/… — Tim Titus

Sam S Sam S · Accepted Answer · 2021-07-22T13:31:42

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

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

2 Answers