closeBracket affects end tag

[IlyaSemenov]

Tell us about your environment

• ESLint version: 5.10.0
• eslint-plugin-vue version: 5.0.0
• Node version: 10.10.0

Please show your full configuration:

module.exports = {
	root: true,
	plugins: ['vue'],
	extends: [
		'plugin:vue/essential',
	],
	rules: {
		'vue/html-indent': [
			'error',
			'tab',
			{
				closeBracket: 1,
			},
		],
	},
}

What did you do?

<template>
	<div>
		<a
			>alksjdklaj dklajsd klaj dklajs kldjaksljdkals jdklas
			jdkljaklsdjkalsjdklajskldjaskl jdklasjdklajslkdja</a
		>
	</div>
</template>

yarn eslint --fix test.vue && cat test.vue

The example deliberately has no whitespace between <a>/</a> and inner text (this is how it happens in real life - links don't typically have side spaces).

What did you expect to happen?

<template>
	<div>
		<a
			>alksjdklaj dklajsd klaj dklajs kldjaksljdkals jdklas
			jdkljaklsdjkalsjdklajskldjaskl jdklasjdklajslkdja</a
		>
	</div>
</template>

What actually happened?

yarn run v1.10.1
$ /Users/semenov/xxx/node_modules/.bin/eslint --fix test.vue
✨  Done in 0.75s.

<template>
	<div>
		<a
			>alksjdklaj dklajsd klaj dklajs kldjaksljdkals jdklas
			jdkljaklsdjkalsjdklajskldjaskl jdklasjdklajslkdja</a
			>
	</div>
</template>

---

I would expect closeBracket not to affect the end tag's indentation as it doesn't make sense (the whole <a>...</a> element becomes unbalanced).

Alternatively, there should be an option to disable closeBracket for end tags separately.

[michalsnik]

Hey @IlyaSemenov Thank you for posting this issue. You might want to check this discussion: #738

[michalsnik]

@IlyaSemenov You can write it like this:

<template>
	<div>
		<a
			href=""
			class=""
		>alksjdklaj dklajsd klaj dklajs kldjaksljdkals jdklas
			jdkljaklsdjkalsjdklajskldjaskl jdklasjdklajslkdja</a
		>
	</div>
</template>

But you might also want to set closeBracket to 0, otherwise it will try to nest it.

In your case however if the element contains a lot of code, and removing all whitespaces around it feels hacky - I'd recommend to use display: inline-block on this element and then you could use it normally:

<template>
	<div>
		<a>
			alksjdklaj dklajsd klaj dklajs kldjaksljdkals jdklas
			jdkljaklsdjkalsjdklajskldjaskl jdklasjdklajslkdja
		</a>
	</div>
</template>

[IlyaSemenov]

I don't understand why did you close the ticket? This wasn't a support case, this was a bug report. The current behaviour of the linter (closeBracket affecting the closing tag's indentation) continues to be wrong.

In other words: please confirm that you indeed believe that emitting closing tag like

<foo
    ></foo
    >

is the expected behaviour, and fixing it to emit

<foo
    ></foo
>

would be the wrong thing.

---

My example is deliberately showing the (arguably rare) edge case to demonstrate the problem / make it more apparent. I don't really need advice on better formatting or on which CSS should I use (no offence). If you are interested, this specific formatting was coming from prettier — but, again, it shouldn't matter, the linter should make reasonable decisions whatever weird input is coming.

[michalsnik]

Oh, I see @IlyaSemenov Sorry about that, I must've misunderstood the issue.

You're right - currently closeBracket relates to both opening and closing tag, but indeed it doesn't make sense to nest it for the closing tag.

I'll look at the implementation.

[michalsnik]

I prepared fix @IlyaSemenov in #756

[IlyaSemenov]

This is super awesome, thank you!