Eslint-plugin-react: react/jsx-no-multiline-js

[ar53n]

Hello, there is a suggestion to add the new rule from the tslint-react. Thank you.
https://github.com/palantir/tslint-react/blob/master/src/rules/jsxNoMultilineJsRule.ts

[ljharb]

I don't see how this could be a viable rule - this would block most inline arrays, objects, or functions from being represented cleanly. Can you justify the purpose of the rule beyond "This helps reduce mental overhead when parsing JSX syntax"?

(https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md set to "never" seems related but not nearly enough for this)

[ar53n]

Thank you for you answer. Its not about only props. This rule prevents writing large js code in render. Forces to break complex sections of code into simpler ones and extract logic from a template into functions

[ljharb]

All it would force you to do is move things into intermediate variables, which isn't always an improvement - most react components i've seen have multiline JS inside their jsx, to great effect.

[BiosBoy]

I guess it should be up to the developer to choose btw. That's how most of the linting rules works. Anyway, it's so pitying that no port of this rule has been in eslint or eslint-plugin-react yet.

[ljharb]

Currently, your choices include sticking with the year-plus-deprecated tslint, writing the rule yourself, or forgoing the rule. I'd suggest the third, even if a fourth option appeared in the future.

[BiosBoy]

@ljharb Well, it's not even about tslint, it's about linting in common.

OK, it seems like all the maintainers here are too busy to make such a useful rule implementation or don't think it so is for some reason. Anyway, it's a pity.

Perhaps I'll write it on my own for personal use. Thanks for your job man though.

[BiosBoy]

For those who wanna working jsx-no-multiline-js rule from tslint-react inside eslint config! You will need to get through nine circles of hell, but it's possible to deal with.

So you need to use typescript-eslint package inside your eslint config and also make some configurations inside it. I've made a short manual here: https://github.com/typescript-eslint/typescript-eslint/issues/1737

It's a very hacky and rude way, but it's the best which we can do in the current environment I guess.

[jsphstls]

Is there an example of how this rule works? All I see is a text descripting and the rule code. Simply going by a number of lines opens up the option to create one line expressions in the JSX, which IMO is even harder to mentally parse when abused.

Rather than porting the rule, I think a better rule would say that JSX can only contain references. I tend to write this way so that JSX only expresses the structure while any other logic is handled elsewhere. I do agree with @ljharb that the typical workaround would be to start moving things around, which does not guarantee that anything becomes easier to mentally parse.

[jsphstls]

I am also curious how this would affect functions as children.