vue/multiline-ternary

Enforce newlines between operands of ternary expressions in <template>

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

This rule is the same rule as @stylistic/multiline-ternary rule but it applies to the expressions in <template> and <style>.

This rule extends the rule that @stylistic/eslint-plugin has, but if @stylistic/eslint-plugin is not installed, this rule extracts and extends the same rule from ESLint core. However, if neither is found, the rule cannot be used.

📖 Rule Details

<template> <div> <!-- ✓ GOOD --> <div :class="isEnabled ? 'check' : 'stop'" /> <!-- ✗ BAD --> <div :class="isEnabled ? 'check' : 'stop'" /> </div> </template> <style> div { /* ✓ GOOD */ color: v-bind('myFlag ? foo : bar'); /* ✗ BAD */ color: v-bind('myFlag ? foo : bar'); } </style>

Now loading...

📚 Further Reading

• @stylistic/multiline-ternary
• multiline-ternary

🚀 Version

This rule was introduced in eslint-plugin-vue v9.7.0

🔍 Implementation

• Rule source
• Test source

^{Taken with ❤️ from ESLint Stylistic}