Add new vue/no-negated-condition rule

.changeset/true-pumas-open.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-vue': minor
+---
+
+Add new `vue/no-negated-condition` rule

docs/rules/index.md

@@ -327,6 +327,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/no-implicit-coercion] | Disallow shorthand type conversions in `<template>` | :wrench::bulb: | :hammer: |
 | [vue/no-irregular-whitespace] | disallow irregular whitespace in `.vue` files |  | :warning: |
 | [vue/no-loss-of-precision] | Disallow literal numbers that lose precision in `<template>` |  | :warning: |
+| [vue/no-negated-condition] | Disallow negated conditions in `<template>` |  | :hammer: |
 | [vue/no-restricted-syntax] | Disallow specified syntax in `<template>` |  | :hammer: |
 | [vue/no-sparse-arrays] | Disallow sparse arrays in `<template>` |  | :warning: |
 | [vue/no-useless-concat] | Disallow unnecessary concatenation of literals or template literals in `<template>` |  | :hammer: |
@@ -482,6 +483,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 [vue/no-multiple-slot-args]: ./no-multiple-slot-args.md
 [vue/no-multiple-template-root]: ./no-multiple-template-root.md
 [vue/no-mutating-props]: ./no-mutating-props.md
+[vue/no-negated-condition]: ./no-negated-condition.md
 [vue/no-parsing-error]: ./no-parsing-error.md
 [vue/no-potential-component-option-typo]: ./no-potential-component-option-typo.md
 [vue/no-ref-as-operand]: ./no-ref-as-operand.md

docs/rules/no-negated-condition.md

@@ -0,0 +1,29 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-negated-condition
+description: Disallow negated conditions in `<template>`
+---
+
+# vue/no-negated-condition
+
+> Disallow negated conditions in `<template>`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
+
+## :book: Rule Details
+
+This rule is the same rule as core [no-negated-condition] rule but it applies to the expressions in `<template>`.
+
+## :books: Further Reading
+
+- [no-negated-condition]
+
+[no-negated-condition]: https://eslint.org/docs/rules/no-negated-condition
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-negated-condition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-negated-condition.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-negated-condition)</sup>

lib/index.js

@@ -141,6 +141,7 @@ const plugin = {
     'no-multiple-slot-args': require('./rules/no-multiple-slot-args'),
     'no-multiple-template-root': require('./rules/no-multiple-template-root'),
     'no-mutating-props': require('./rules/no-mutating-props'),
+    'no-negated-condition': require('./rules/no-negated-condition'),
     'no-parsing-error': require('./rules/no-parsing-error'),
     'no-potential-component-option-typo': require('./rules/no-potential-component-option-typo'),
     'no-ref-as-operand': require('./rules/no-ref-as-operand'),

lib/rules/no-negated-condition.js

@@ -0,0 +1,12 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapCoreRule('no-negated-condition', {
+  applyDocument: true
+})

tests/lib/rules/no-negated-condition.js

@@ -0,0 +1,166 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-negated-condition')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-negated-condition', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="foo ? 'baz' : 'bar'" />
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :style="{ color: isActive ? 'red' : 'blue' }" />
+      </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="!foo ? 'bar' : 'baz'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 22,
+          endLine: 3,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :style="{
+          'display': !isVisible ? 'none' : 'block',
+          'color': 'red'
+        }" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 4,
+          column: 22,
+          endLine: 4,
+          endColumn: 51
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'hidden': !foo ? true : false,
+          'visible': bar
+        }" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 40
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :disabled="!enabled ? true : false" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 48
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="a !== b ? 'different' : 'same'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 22,
+          endLine: 3,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="a != b ? 'not-equal' : 'equal'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 22,
+          endLine: 3,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :style="{
+          opacity: !(x && y) ? 0 : 1
+        }" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 4,
+          column: 20,
+          endLine: 4,
+          endColumn: 37
+        }
+      ]
+    }
+  ]
+})