Eslint-plugin-vue: [vue/html-indent] unexpected indentation level

[rodneyrehm]

Tell us about your environment

• ESLint Version: 4.13.1
• eslint-plugin-vue Version: 4.0.0-beta.3
• Node Version: 9.3.0

Please show your full configuration:

'vue/html-indent': ['error', 2, {
  'attribute': 1
}],

What did you do? Please include the actual source code causing the issue.

<template>
  <div class="alpha">
    <div
      class="bravo"
    />
    <div v-for="n in list" :key="n"
      class="charlie"
    >
      {{ n }}
    </div>
    <div
      v-for="n in list"
      :key="n"
      class="delta"
    >
      {{ n }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['a', 'b', 'c'],
    }
  },
}
</script>

What did you expect to happen?

I expect the template to be considered valid.

What actually happened? Please include the actual, raw output from ESLint.

…/src/demo.vue
  7:1  error  Expected indentation of 9 spaces but found 6 spaces  vue/html-indent

Note how the indentation of class="bravo" and class="delta" is fine, but class="charlie" is somehow trying to align with the v-for="…" on the previous line.

---

We tend to keep properties v-if, v-else-if, v-else, v-for, key and is on the same line as the opening element, where the remaining properties are spread onto their own lines. I understand the fix for my problem is to move all attributes off the opening line, but the current behavior remains unexpected.

[michalsnik]

Hey @rodneyrehm . I'm glad you pointed this! I'll try to look into this :)

[mysticatea]

Thank you for this report.

Currently, it's intentional behavior -- if the first attribute is not at beginning of the line, the rule aligns rest attributes to the first attribute. This supports the following-like style:

<div id="foo"
     class="abc"
     style="font-color: red;">

I think we can add an option about this behavior.

[michalsnik]

Ok, I spent some time on it, and I found a way to improve this rule. PR is on it's way :)
I think that below code should be preferred over the one with aligned attributes:

<section v-for="n in list"
  :key="n"
  class="delta"
 >
</section>

[egervari]

For what it's worth, I think

<div id="foo"
     class="abc"
     style="font-color: red;">

is easier to read...

After upgrading, having the recommended settings format my entire project to the other formatting style gave me a panic attack. I quite liked the way I wrote the code originally, and now I sort of want prettier/eslint to get out of my way.