*-html-element-content-newline causes render output changes

[Jessidhia]

Tell us about your environment

• ESLint version: 5.12.0
• eslint-plugin-vue version: 5.1.0
• Node version: 11.0.0

Please show your full configuration:

module.exports = {
  extends: [
    'plugin:vue/recommended'
  ],
  rules: {
    'vue/name-property-casing': ['error', 'kebab-case'],
    'vue/html-indent': ['error', 2, {
      'attribute': 1,
      'baseIndent': 1,
      'closeBracket': 0,
      'alignAttributesVertically': false,
      'ignores': []
    }],
    'vue/require-default-prop': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/no-v-html': 'off'
  }
};

What did you do?

<template>
	<span class="test">foo</span>
</template>

What did you expect to happen?

Applying the lint change (eslint --fix) should cause no visual changes to output DOM.

What actually happened?

<template>
	<span class="test">
    foo
  </span>
</template>

---

The rule has ignore settings for specific tags (pre and textarea by default), but that completely ignores that this is a problem with any inline element; and because of CSS display any element can be inline. There is a difference between a <span> foo </span> and <span>foo</span>.

The root cause, IMO, is that vue-template-compiler in 'condense' mode doesn't strip all the space between the opening tag and the text indent level, or the end of the text and the closing tag. Perhaps another mode should be added that would strip all whitespace up to the first non-whitespace character if the whitespace includes a newline. (this could cause problems with long form prose, but it can be worked around the same way as in JSX -- interpolate a whitespace character {{' '}}).

Because of how 'condense' works, this lint rule is fine if all children are themselves elements, but it requires changes to actual output when the first/last child are text nodes or interpolations, which is kind of an overreach for a lint rule, especially for one enabled by default.

Perhaps it's completely intentional that Vue always has the same behavior as HTML instead of JSX, in which case these rules should also have an exception for text content / interpolations instead of only for tag names.

[ota-meshi]

Thank you for this issue.

I think that it was solved in v5.2.0.
*-html-element-content-newline rules has been changed to ignore some inline elements.

#738
https://github.com/vuejs/eslint-plugin-vue/releases/tag/v5.2.0

[mysticatea]

Closing as resolved. Thank you!