Rule proposal: no-dangling-else - Disallow dangling else ambiuguity

[Gr3q]

Description

Detect Dangling else ambiguity, especially around if statements without brackets.

Fail

if (statement1)
    if (statement2)
       console.log("statement2")
else
    if (statement3)
        console.log("statement3")

if (statement1)
    if (statement2)
       console.log("statement2")

Pass

if (statement1) {
    if (statement2)
       console.log("statement2")
}
else {
    if (statement3)
        console.log("statement3")
}

if (statement1) {
    if (statement2)
       console.log("statement2")
    else
        if (statement3)
            console.log("statement3")
}

if (statement1) {
    if (statement2)
       console.log("statement2")
}

Proposed rule name

no-dangling-else

Additional Info

The allowed case should be "Disallowing the statement following a "then" to be an "if" itself (it may however be a pair of statement brackets containing only an if-then-clause)." - Taken from Avoiding_ambiguity_by_changing_the_syntax section in the Wikipedia article.

While there are other ways to prevent this problem like enforcing braces or enforcing formatting rules to make the problem obvious, nothing I found helps finding mistakes like these (which cause bugs in logic and needs to be fixed by a human) in an existing codebase.

e.g. Eslint's curly would use the latter accepted form when fixing, while that is how it's interpreted by JavaScript, there was an ambiguity when the code was written.

[sindresorhus]

I think not using braces for conditionals is an anti-pattern, which would have avoided situations like this, so I'm 👎 on this.

[Gr3q]

I agree. Still, fixing all cases of this type of issue in an existing codebase is a must before one can adopt stricter brace rules, especially because of the ambiguity it should not be auto-fixed by other tools requiring braces (the auto-fix part is obviously not the scope of this rule).

Nevertheless if you chose not to add this rule, for posterity one can find all cases of this issue with no-restricted-syntax .

{
         selector: "IfStatement[consequent.type='IfStatement'] > [consequent]",
         message: "This statement is ambiguous, please use block statements (brackets)."
}