Max nesting/indentation
See original GitHub issuePlease 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
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (5 by maintainers)
No, that would just be for
CallExpression
s (so it would catch theReact.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.
Good catch, I meant to call that as a IIFE. Contrived example but hopefully you get the idea