vuejs/eslint-plugin-vue

Rule suggestion: `vue/no-negated-condition` for `v-if`/`v-else` in the template

Closed this issue · 0 comments

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.