no-nested-ternary.md

no-nested-ternary

📝 Disallow nested ternary expressions.

💼🚫 This rule is enabled in the ✅ recommended config. This rule is disabled in the ☑️ unopinionated config.

🔧 This rule is automatically fixable by the --fix CLI option.

Improved version of the no-nested-ternary ESLint rule. This rule allows cases where the nested ternary is only one level and wrapped in parens.

Unparenthesized or deeply nested ternaries make readers track multiple conditions and branches at once, so this rule permits only clearly parenthesized single-level nesting.

Replacement for ESLint no-nested-ternary

This rule replaces ESLint's built-in no-nested-ternary rule, which Unicorn presets disable when this rule is enabled.

Examples

// ❌
const foo = i > 5 ? i < 100 ? true : false : true;

// ✅
const foo = i > 5 ? (i < 100 ? true : false) : true;

// ❌
const foo = i > 5 ? true : (i < 100 ? true : (i < 1000 ? true : false));

// ✅
const foo = i > 5 || i < 100 || i < 1000;

Partly fixable

This rule is only fixable when the nesting is up to one level. The rule will wrap the nested ternary in parens:

const foo = i > 5 ? i < 100 ? true : false : true

will get fixed to

const foo = i > 5 ? (i < 100 ? true : false) : true

Disabling ESLint no-nested-ternary

We recommend disabling the ESLint no-nested-ternary rule in favor of this one:

{
	rules: {
		'no-nested-ternary': 'off',
	},
}

The Unicorn presets do this for you when this rule is enabled.