Volar and Prettier have fightin' words!

In vscode, Volar formats an HTML tag with many attributes in as few lines as possible. Look at the <img> tag on line 3:

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" data-option1="something"
      data-option2="something" data-option3="something" data-option4="something" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

Prettier formats it like the following into multiple lines. As before, look at the <img> tag on line 3:

<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="@/assets/logo.svg"
      width="125"
      height="125"
      data-option1="something"
      data-option2="something"
      data-option3="something"
      data-option4="something"
    />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

I am following the Vue recommendation to use the Volar extension, and so far it seems to be pretty good, except for the hiccup mentioned above.

Is there a way have the prettier setting used in this situation without disabling all of Volar? Or is this a Volar philosophy to minimize the number of lines?

In case it helps, here is my .eslint.js file:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier',
  ],
  env: {
    'vue/setup-compiler-macros': true,
  },
  rules: {
    quotes: ['error', 'single', { avoidEscape: true }],
  },
};

In my vscode settings, I have:

  "[vue]": {
    "editor.defaultFormatter": "johnsoncodehk.volar"
  },

Finally, here is a screenshot of how it looks, in case that’s helpful:

Note that I tried playing around with the vue/max-attributes-per-line setting, but that went off the rails very quickly and I immediately ran away from it.

[movy]

Just tried switching from Vetur and stumbled upon this. Wrapping attributes is essential for readability and easy editing, and it is amongst strongly recommended Vue guidelines: https://vuejs.org/style-guide/rules-strongly-recommended.html#multi-attribute-elements

Cleary it does not work out of the box and Volar unwraps the attributes for no apparent reason. I saw a number of similar issues with no clear / working solution, how come it’s still unsolved?

[JessRascal]

For me, the key to solving this was changing @vue/eslint-config-prettier to prettier in the extends of the .eslintrc.* file.

Note: This is as per the note in the Installation section of the documentation regarding v8+).

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript/recommended',
    'prettier', // this used to be @vue/eslint-config-prettier
  ],
};

They stopped fighting after I changed this.

I also made sure my default formatter in VS Code was set to Prettier - Code Formatter (right-click in a file > select Format Document With... > select Configure Default Formatter... > select Prettier - Code Formatter).

I hope this helps someone with the annoying default setup 😃