How to use flat nested ternaries with ESLint?

Question

I have some code like this:

let upgrade;
if (device.firmwareV !== latestFirmware.version) {
    upgrade = "Firmware is up to date.";
} else if (!firmUpTool) {
    upgrade = "Cannot upgrade the firmware through this connection.";
} else if (latestFirmware.type !== device.type) {
    upgrade = "Cannot upgrade firmware of this device.";
} else {
    upgrade = upgradeControl(firmUpTool);
}

But I would prefer to use the ternary operator (condition ? value1 : value2) because it allows me to replace let with const (and in my opinion it looks tidier, though I appreciate that opinions vary):

const upgrade =
    device.firmwareV !== latestFirmware.version ?
        "Firmware is up to date."
    : !firmUpTool ?
        "Cannot upgrade the firmware through this connection."
    : latestFirmware.type !== device.type ?
        "Cannot upgrade firmware of this device."
    : upgradeControl(firmUpTool);

But ESLint give 5 erros like Expected indentation of 12 spaces but found 8.. If I follow the recommendations I have to indent the code even though I have given it an indent rule:

indent: [2, 4, {flatTernaryExpressions: true}]

I can get rid of the warnings by removing the newlines after each ? but that makes lines excessively long and not as readable in my opinion.

Is there a better way of laying out flat nested ternaries or is there some other ESLint rule I should be using here?

why not use a function with early return? instead of chained `if .. else if ...` parts? — Nina Scholz, Nov 01 '18 at 10:44
@Nina-Scholz Why not post that as an answer if you think it looks better. — James, Nov 01 '18 at 10:49
@hindmost In the past there have been few reasons to use nested ternaries, but now that `const` is preferred over `let` there is more incentive to code initialises as expressions. So with this question I am exploring whether it is time to embrace and learn to like what I also previously considered ugly. — James, Nov 01 '18 at 11:03

score 2 · Answer 1 · edited Nov 01 '18 at 11:11

You could use a fucntion which check the parts and return early if a condition is true.

The advantage is better readably and maintainability.

The missing else parts is covered by a possible earlier exit of the function.

function checkUpgrade() {
    if (device.firmwareV !== latestFirmware.version) {
        return "Firmware is up to date.";
    }
    if (!firmUpTool) {
        return "Cannot upgrade the firmware through this connection.";
    }
    if (latestFirmware.type !== device.type) {
        return "Cannot upgrade firmware of this device.";
    }
    return upgradeControl(firmUpTool);
}

const upgrade = checkUpgrade();

This is a good answer. It permits `const`. I have not marked it as the accepted answer because it does not directly address the ESLint question I asked. — James, Nov 01 '18 at 11:26

How to use flat nested ternaries with ESLint?

1 Answers1