Create vue/multiline-ternary extension rule

docs/rules/README.md

@@ -292,6 +292,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/key-spacing](./key-spacing.md) | Enforce consistent spacing between keys and values in object literal properties in `<template>` | :wrench: | :lipstick: |
 | [vue/keyword-spacing](./keyword-spacing.md) | Enforce consistent spacing before and after keywords in `<template>` | :wrench: | :lipstick: |
 | [vue/max-len](./max-len.md) | enforce a maximum line length in `.vue` files |  | :lipstick: |
+| [vue/multiline-ternary](./multiline-ternary.md) | Enforce newlines between operands of ternary expressions in `<template>` | :wrench: | :lipstick: |
 | [vue/no-constant-condition](./no-constant-condition.md) | Disallow constant expressions in conditions in `<template>` |  | :warning: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | Disallow empty destructuring patterns in `<template>` |  | :warning: |
 | [vue/no-extra-parens](./no-extra-parens.md) | Disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |

docs/rules/multiline-ternary.md

@@ -0,0 +1,27 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/multiline-ternary
+description: Enforce newlines between operands of ternary expressions in `<template>`
+---
+# vue/multiline-ternary
+
+> Enforce newlines between operands of ternary expressions in `<template>`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as core [multiline-ternary] rule but it applies to the expressions in `<template>`.
+
+## :books: Further Reading
+
+- [multiline-ternary]
+
+[multiline-ternary]: https://eslint.org/docs/rules/multiline-ternary
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multiline-ternary.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/multiline-ternary.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/multiline-ternary)</sup>

lib/configs/no-layout-rules.js

@@ -31,6 +31,7 @@ module.exports = {
     'vue/max-attributes-per-line': 'off',
     'vue/max-len': 'off',
     'vue/multiline-html-element-content-newline': 'off',
+    'vue/multiline-ternary': 'off',
     'vue/mustache-interpolation-spacing': 'off',
     'vue/new-line-between-multi-line-property': 'off',
     'vue/no-extra-parens': 'off',

lib/index.js

@@ -54,6 +54,7 @@ module.exports = {
     'max-len': require('./rules/max-len'),
     'multi-word-component-names': require('./rules/multi-word-component-names'),
     'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
+    'multiline-ternary': require('./rules/multiline-ternary'),
     'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
     'new-line-between-multi-line-property': require('./rules/new-line-between-multi-line-property'),
     'next-tick-style': require('./rules/next-tick-style'),

lib/rules/multiline-ternary.js

@@ -0,0 +1,17 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+module.exports = wrapCoreRule('multiline-ternary', {
+  skipDynamicArguments: true,
+  applyDocument: true
+})

tests/lib/rules/multiline-ternary.js

@@ -0,0 +1,245 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { RuleTester, ESLint } = require('../../eslint-compat')
+const rule = require('../../../lib/rules/multiline-ternary')
+const semver = require('semver')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('multiline-ternary', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'test': someReallyLongCondition ?
+            aVeryLongOutput :
+            thisCantFitOnASingleLine
+        }">
+        </div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+        }">
+        </div>
+      </template>
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+          <div class="test">
+          </div>
+      </template>
+      <style>
+        .test {
+            color: v-bind('someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine')
+        }
+      </style>
+      `,
+      options: ['never']
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?
+              aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: semver.gte(ESLint.version, '7.1.0')
+        ? `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?
+              aVeryLongOutput
+: thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `
+        : null,
+      errors: [
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 5,
+          column: 15
+        }
+      ],
+      options: ['always-multiline']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?
+              aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: semver.gte(ESLint.version, '7.1.0')
+        ? `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `
+        : null,
+      errors: [
+        {
+          message:
+            'Unexpected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 21
+        }
+      ],
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: semver.gte(ESLint.version, '7.1.0')
+        ? `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `
+        : null,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 21
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 4,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :style="{
+            'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: semver.gte(ESLint.version, '7.1.0')
+        ? `
+        <template>
+          <div :style="{
+            'test': someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `
+        : null,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 21
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 4,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div class="test">
+          </div>
+        </template>
+        <style>
+          .test {
+              color: v-bind('someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine')
+          }
+        </style>
+        `,
+      output: semver.gte(ESLint.version, '7.1.0')
+        ? `
+        <template>
+          <div class="test">
+          </div>
+        </template>
+        <style>
+          .test {
+              color: v-bind('someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine')
+          }
+        </style>
+        `
+        : null,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 8,
+          column: 30
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 8,
+          column: 56
+        }
+      ]
+    }
+  ]
+})