Description
Please describe what the rule should do:
Similar to the core ESLint rule no-negated-condition (and its autofixable variant unicorn/no-negated-condition), this rule would report negated conditions in the template (only if both if
and else
cases are handled). Avoiding unnecessary negated conditions makes the code a bit easier to read.
What category should the rule belong to?
[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<template>
<div>
<!-- BAD -->
<div v-if="!foo" />
<span v-else />
<!-- GOOD -->
<span v-if="foo" />
<div v-else />
</div>
</template>
Additional context
Should it also report ternaries with negated conditions used in the template?
<template>
<div>
<!-- BAD -->
<div :class="!foo ? 'bar' : 'baz'" />
<!-- GOOD -->
<div :class="foo ? 'baz' : 'bar'" />
</div>
</template>
Or should that be a different rule? Then the names could be vue/no-negated-condition
for the no-negated-condition extension rule that applies to ternaries, and vue/no-negated-v-if-condition
for the rule proposed above.