Ability to tell autoformatter to respect how I multipline split html attributes in VS Code

Question

I have a problem in VS Code using Prettier for autoformatting JS and Vue code.

For example, how to set it to save this:

<Todo 
  v-for="todo in todos" 
  :key="todo.id" 
/> 

as is - meaning on multiple line, one per each attribute?

So far if I do it like that and press cmd + s it will reformat it to this:

<Todo v-for="todo in todos" :key="todo.id" />

This is what I currently have in settings.json:

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "html.format.wrapAttributes": "force-expand-multiline",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Any idea how make VS Code respect when I manually decide to split attributes in my .vue files each on a new line?

Answer 1

Enable Prettier's singleAttributePerLine option in <projectRoot>/.prettierrc (create file if needed):

// .prettierrc
{
  "singleAttributePerLine": true
}

If you prefer a global configuration for all projects, create $HOME/.prettierrc with the config above. A minor inconvenience when using the global config is that the Prettier extension only reads $HOME/.prettierrc once at startup. Any changes to that file would require an IDE restart to re-register the config.