Max nesting/indentation

Please describe what the rule should do:

What category of rule is this? (place an “X” next to just one item)

[ ] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [x] Enforces code style (layout) [ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

Assuming a configured max setting of 6

function fn() {
    for (;;) { // Nested 1 deep
        while (true) { // Nested 2 deep
            if (true) { // Nested 3 deep
                if (true) { // Nested 4 deep
                    React.createElement('div', {}, // Nested 5 deep
                        React.createElement('div', {}) // Nested 6 deep
                    );
                }
            }
        }
    }
}

function fn() {
    for (;;) { // Nested 1 deep
        while (true) { // Nested 2 deep
            if (true) { // Nested 3 deep
                if (true) { // Nested 4 deep
                    <div> {/* Nested 5 deep */}
                        <div></div> {/* Nested 6 deep */}
                    </div>
                }
            }
        }
    }
}

function fn() {
    for (;;) { // Nested 1 deep
        while (true) { // Nested 2 deep
            <div> {/* Nested 3 deep */}
                <div> {/* Nested 4 deep */}
                    {(() => { // Nested 5 deep
                       'Hello, World!' // Nested 6 deep
                    })}
                </div>
            </div>
        }
    }
}

Why should this rule be included in ESLint (instead of a plugin)?

• ESLint already has a max-depth rule
• The React plugin already has a jsx-max-depth rule

However, neither of these will help to prevent nested function calls, where the functions may be a mixture of normal functions, React.createElement, or JSX—as often happens inside React components (although this isn’t really a React specific problem).

Readability is difficult when things are deeply nested. The solution is to extract nested expressions into functions.

Are you willing to submit a pull request to implement this rule? Yes

[kaicataldo]

No, that would just be for CallExpressions (so it would catch the React.createElement() calls). If we add support for JSX as well, I think we would need to add that as a separate option.

I actually think it would be best to separate out the discussion of JSX into a separate issue/proposal, because that seems significantly more complex and might require some more discussion.

[OliverJAsh]

Good catch, I meant to call that as a IIFE. Contrived example but hopefully you get the idea